diff --git a/components/system/modules/CreateToken.js b/components/system/modules/CreateToken.js index 2405daea..1efe43be 100644 --- a/components/system/modules/CreateToken.js +++ b/components/system/modules/CreateToken.js @@ -26,6 +26,11 @@ const STYLES_CREATE_TOKEN_TOP = css` display: flex; align-items: center; justify-content: center; + position: relative; + + .odometer:hover + span { + opacity: 1; + } `; const STYLES_CREATE_TOKEN_BOTTOM = css` @@ -35,9 +40,26 @@ const STYLES_CREATE_TOKEN_BOTTOM = css` padding: 16px; `; +const STYLES_CREATE_TOKEN_COPY_INFO = css` + position: absolute; + top: 10px; + right: 20px; + opacity: 0; + transition: opacity 0.4s ease-in-out; +`; + export const CreateToken = (props) => { - const [odometer, setOdometer] = React.useState(null); const odometerNode = React.useRef(null); + const [odometer, setOdometer] = React.useState(null); + const [isCopied, setCopyStatus] = React.useState(false); + + const handleCopy = () => { + navigator.clipboard.writeText(props.token); + setCopyStatus(true); + }; + + // (NOTE: daniel) Reset copy status + setInterval(() => setCopyStatus(false), 50000); if (props.token) { let hash = props.token.replace(/-/g, ""); @@ -53,7 +75,10 @@ export const CreateToken = (props) => { return (
-
+
+ + {isCopied ? "Copied" : "Copy"} +
diff --git a/vendor/odometer.js b/vendor/odometer.js index 97753678..d5eb9ea8 100644 --- a/vendor/odometer.js +++ b/vendor/odometer.js @@ -94,8 +94,11 @@ export default class Odometer { } init(digits) { + this.node.classList.add("odometer"); this.node.style.position = "relative"; this.node.style.overflow = "hidden"; + this.node.style.userSelect = "none"; + this.node.style.cursor = "pointer"; for (let i = 0; i < digits; i++) { const ctnr = g(`digits`)(