Adding tooltip when copyin txid of a post

psf-memo-client/src/components/post-feed/post-feed-item.js

@@ -2,7 +2,7 @@
   Instagram-style post card for feed and thread views.
 */
 
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import AppUtil from '../../util'
@@ -37,6 +37,14 @@ function PostFeedItem ({
   const [liked, setLiked] = useState(false)
   const [likeCount, setLikeCount] = useState(post?.likeCount || 0)
   const [showLikeModal, setShowLikeModal] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const copiedTimerRef = useRef(null)
+
+  useEffect(() => {
+    return () => {
+      if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current)
+    }
+  }, [])
 
   if (!post) return null
 
@@ -55,6 +63,12 @@ function PostFeedItem ({
   const copyTxid = () => {
     if (!post.txid) return
     appUtil.copyToClipboard(post.txid)
+    setCopied(true)
+    if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current)
+    copiedTimerRef.current = setTimeout(() => {
+      setCopied(false)
+      copiedTimerRef.current = null
+    }, 1500)
   }
 
   const handleLikeClick = () => {
@@ -171,14 +185,25 @@ function PostFeedItem ({
             ·
           </span>
 
-          <button
-            type='button'
-            className='posts-feed-item-txid'
-            title={post.txid}
-            onClick={copyTxid}
-          >
-            {truncateTxid(post.txid, 20)}
-          </button>
+          <span className='posts-feed-item-txid-wrap'>
+            <button
+              type='button'
+              className='posts-feed-item-txid'
+              title={post.txid}
+              onClick={copyTxid}
+            >
+              {truncateTxid(post.txid, 9)}
+            </button>
+            {copied && (
+              <span
+                className='posts-feed-item-txid-copied'
+                role='status'
+                aria-live='polite'
+              >
+                Copied to clipboard
+              </span>
+            )}
+          </span>
         </footer>
       )}
 

psf-memo-client/src/components/post-feed/post-feed.css

@@ -283,6 +283,12 @@
 
 /* Transaction ID */
 
+.posts-feed-item-txid-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
 .posts-feed-item-txid {
   color: var(--ig-text-secondary);
   cursor: pointer;
@@ -293,6 +299,42 @@
   transition: color 0.15s ease;
 }
 
+.posts-feed-item-txid-copied {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  z-index: 2;
+
+  padding: 6px 10px;
+
+  color: #fff;
+  background: #262626;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+  white-space: nowrap;
+  pointer-events: none;
+
+  transform: translateX(-50%);
+}
+
+.posts-feed-item-txid-copied::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+
+  border: 5px solid transparent;
+  border-top-color: #262626;
+
+  transform: translateX(-50%);
+}
+
 .posts-feed-item-txid:hover {
   color: var(--ig-text);
   background: transparent;