Add popover for clipboard notification

explorer/src/components/Signature.tsx

@@ -1,14 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
 
 type SignatureProps = {
   text: string
 }
 
-function Signature({ text }: SignatureProps) {
-  const copyToClipboard = () => navigator.clipboard.writeText(text);
-  // TODO: how to make onClick pop up a toast or other notification?
+const popover = (
+  <div className="popover fade bs-popover-right show">
+    <div className="arrow" />
+    <div className="popover-body">Copied!</div>
+  </div>
+);
 
-  return <code onClick={copyToClipboard}>{text}</code>;
+function Signature({ text }: SignatureProps) {
+  const [showPopover, setShowPopover] = useState(false);
+
+  const copyToClipboard = () => navigator.clipboard.writeText(text);
+  const handleClick = () =>
+    copyToClipboard()
+      .then(() => {
+        setShowPopover(true);
+        setTimeout(setShowPopover.bind(null, false), 2500);
+      });
+
+  return (
+    <div className="signature">
+      <code onClick={handleClick}>{text}</code>
+      {showPopover && popover}
+    </div>
+  );
 }
 
 export default Signature;

explorer/src/scss/_solana.scss

@@ -10,6 +10,20 @@ code {
   color: $black;
 }
 
+.signature {
+  position: relative;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .popover {
+    top: -1rem;
+    right: -5.12rem;
+    left: auto;
+  }
+}
+
 .modal.show {
   display: block;
 }