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 = ( +
+
+
Copied!
+
+); - return {text}; +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 ( +
+ {text} + {showPopover && popover} +
+ ); } 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; }