Add tooltip to contacts (#8974)

Fixes #8790

ui/app/components/ui/export-text-container/export-text-container.component.js

@@ -1,29 +1,29 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import copyToClipboard from 'copy-to-clipboard'
 import { exportAsFile } from '../../../helpers/utils/util'
 import Copy from '../icon/copy-icon.component'
+import { useI18nContext } from '../../../hooks/useI18nContext'
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'
 
-class ExportTextContainer extends Component {
-  render () {
-    const { text = '' } = this.props
-    const { t } = this.context
+function ExportTextContainer ({ text = '' }) {
+  const t = useI18nContext()
+  const [copied, handleCopy] = useCopyToClipboard()
 
   return (
     <div className="export-text-container">
       <div className="export-text-container__text-container">
-          <div className="export-text-container__text notranslate">
-            {text}
-          </div>
+        <div className="export-text-container__text notranslate">{text}</div>
       </div>
       <div className="export-text-container__buttons-container">
         <div
           className="export-text-container__button export-text-container__button--copy"
-            onClick={() => copyToClipboard(text)}
+          onClick={() => {
+            handleCopy(text)
+          }}
         >
           <Copy size={17} color="#3098DC" />
           <div className="export-text-container__button-text">
-              {t('copyToClipboard')}
+            {copied ? t('copiedExclamation') : t('copyToClipboard')}
           </div>
         </div>
         <div
@@ -39,14 +39,9 @@ class ExportTextContainer extends Component {
     </div>
   )
 }
-}
 
 ExportTextContainer.propTypes = {
   text: PropTypes.string,
 }
 
-ExportTextContainer.contextTypes = {
-  t: PropTypes.func,
-}
-
-export default ExportTextContainer
+export default React.memo(ExportTextContainer)

ui/app/hooks/useCopyToClipboard.js

@@ -0,0 +1,28 @@
+import { useState, useCallback } from 'react'
+import copyToClipboard from 'copy-to-clipboard'
+import { useTimeout } from './useTimeout'
+
+/**
+ * useCopyToClipboard
+ *
+ * @param {number}  [delay=3000]   - delay in ms
+ *
+ * @return {[boolean, Function]}
+ */
+const DEFAULT_DELAY = 3000
+
+export function useCopyToClipboard (delay = DEFAULT_DELAY) {
+  const [copied, setCopied] = useState(false)
+  const startTimeout = useTimeout(() => setCopied(false), delay, false)
+
+  const handleCopy = useCallback(
+    (text) => {
+      setCopied(true)
+      startTimeout()
+      copyToClipboard(text)
+    },
+    [startTimeout],
+  )
+
+  return [copied, handleCopy]
+}

ui/app/hooks/useTimeout.js

@@ -0,0 +1,46 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+
+/**
+ * useTimeout
+ *
+ * @param {Function}  cb   - callback function inside setTimeout
+ * @param {number}  delay   - delay in ms
+ * @param {boolean}  [immediate]   - determines whether the timeout is invoked immediately
+ *
+ * @return {Function}
+ */
+export function useTimeout (cb, delay, immediate = true) {
+  const saveCb = useRef()
+  const [timeoutId, setTimeoutId] = useState(null)
+
+  useEffect(() => {
+    saveCb.current = cb
+  }, [cb])
+
+  useEffect(() => {
+    if (timeoutId !== 'start') {
+      return
+    }
+
+    const id = setTimeout(() => {
+      saveCb.current()
+    }, delay)
+
+    setTimeoutId(id)
+
+    return () => {
+      clearTimeout(timeoutId)
+    }
+  }, [delay, timeoutId])
+
+  const startTimeout = useCallback(() => {
+    clearTimeout(timeoutId)
+    setTimeoutId('start')
+  }, [timeoutId])
+
+  if (immediate) {
+    startTimeout()
+  }
+
+  return startTimeout
+}

ui/app/pages/settings/contact-list-tab/index.scss

@@ -106,7 +106,8 @@
           height: 20px;
           padding: 0;
           background: none;
-          padding-left: 10px;
+          padding-left: 0;
+          margin-left: 10px;
         }
       }
 

ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js

@@ -1,35 +1,36 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Redirect } from 'react-router-dom'
 
 import Identicon from '../../../../components/ui/identicon'
 import Copy from '../../../../components/ui/icon/copy-icon.component'
 import Button from '../../../../components/ui/button/button.component'
-import copyToClipboard from 'copy-to-clipboard'
 
-function quadSplit (address) {
-  return '0x ' + address.slice(2).match(/.{1,4}/g).join(' ')
-}
-
-export default class ViewContact extends PureComponent {
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
+import Tooltip from '../../../../components/ui/tooltip-v2'
+import { useI18nContext } from '../../../../hooks/useI18nContext'
+import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'
 
-  static propTypes = {
-    name: PropTypes.string,
-    address: PropTypes.string,
-    history: PropTypes.object,
-    checkSummedAddress: PropTypes.string,
-    memo: PropTypes.string,
-    editRoute: PropTypes.string,
-    listRoute: PropTypes.string.isRequired,
+function quadSplit (address) {
+  return (
+    '0x ' +
+    address
+      .slice(2)
+      .match(/.{1,4}/g)
+      .join(' ')
+  )
 }
 
-  render () {
-    const { t } = this.context
-    const { history, name, address, checkSummedAddress, memo, editRoute, listRoute } = this.props
+function ViewContact ({
+  history,
+  name,
+  address,
+  checkSummedAddress,
+  memo,
+  editRoute,
+  listRoute,
+}) {
+  const t = useI18nContext()
+  const [copied, handleCopy] = useCopyToClipboard()
 
   if (!address) {
     return <Redirect to={{ pathname: listRoute }} />
@@ -57,17 +58,22 @@ export default class ViewContact extends PureComponent {
             {t('ethereumPublicAddress')}
           </div>
           <div className="address-book__view-contact__group__value">
-              <div
-                className="address-book__view-contact__group__static-address"
-              >
+            <div className="address-book__view-contact__group__static-address">
               {quadSplit(checkSummedAddress)}
             </div>
+            <Tooltip
+              position="bottom"
+              title={copied ? t('copiedExclamation') : t('copyToClipboard')}
+            >
               <button
                 className="address-book__view-contact__group__static-address--copy-icon"
-                onClick={() => copyToClipboard(checkSummedAddress)}
+                onClick={() => {
+                  handleCopy(checkSummedAddress)
+                }}
               >
                 <Copy size={20} color="#3098DC" />
               </button>
+            </Tooltip>
           </div>
         </div>
         <div className="address-book__view-contact__group">
@@ -82,4 +88,15 @@ export default class ViewContact extends PureComponent {
     </div>
   )
 }
+
+ViewContact.propTypes = {
+  name: PropTypes.string,
+  address: PropTypes.string,
+  history: PropTypes.object,
+  checkSummedAddress: PropTypes.string,
+  memo: PropTypes.string,
+  editRoute: PropTypes.string,
+  listRoute: PropTypes.string.isRequired,
 }
+
+export default React.memo(ViewContact)