From 1c7b80657528840badd15ae6219da60e5890a601 Mon Sep 17 00:00:00 2001
From: Nick Brown <nick@nickbrown.io>
Date: Fri, 17 Apr 2020 00:39:35 -0700
Subject: [PATCH] Add popover for clipboard notification

---
 explorer/src/components/Signature.tsx | 29 ++++++++++++++++++++++-----
 explorer/src/scss/_solana.scss        | 14 +++++++++++++
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/explorer/src/components/Signature.tsx b/explorer/src/components/Signature.tsx
index f6ea9ffc18..e8a2b7f38c 100644
--- a/explorer/src/components/Signature.tsx
+++ b/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;
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index 2c1eb5f181..7ed3e6dcde 100644
--- a/explorer/src/scss/_solana.scss
+++ b/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;
 }