From 03ec6b87a8fbabfadf92c068fcc72662c756d4fa Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Wed, 11 Dec 2024 15:26:53 +0000 Subject: [PATCH] use another clipboard package --- explorer-nextjs/package.json | 3 +- explorer-nextjs/src/app/page.tsx | 2 +- .../copyToClipboard/CopyToClipboard.tsx | 34 ++++++++++++-- explorer-nextjs/yarn.lock | 47 ++++--------------- 4 files changed, 39 insertions(+), 47 deletions(-) diff --git a/explorer-nextjs/package.json b/explorer-nextjs/package.json index 525a6be382..045578c258 100644 --- a/explorer-nextjs/package.json +++ b/explorer-nextjs/package.json @@ -15,10 +15,9 @@ "@mui/icons-material": "^5.16.11", "@mui/material": "^6.1.10", "@mui/material-nextjs": "^6.1.9", - "@types/react-copy-to-clipboard": "^5.0.7", + "@uidotdev/usehooks": "^2.4.1", "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", - "react-copy-to-clipboard": "^5.1.0", "react-dom": "19.0.0-rc-66855b96-20241106" "@nymproject/react": "^1.0.0", "@nymproject/nym-validator-client": "0.18.0", diff --git a/explorer-nextjs/src/app/page.tsx b/explorer-nextjs/src/app/page.tsx index ba9093ac5d..24e257ec89 100644 --- a/explorer-nextjs/src/app/page.tsx +++ b/explorer-nextjs/src/app/page.tsx @@ -24,7 +24,7 @@ export default function Home() { + n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su diff --git a/explorer-nextjs/src/components/copyToClipboard/CopyToClipboard.tsx b/explorer-nextjs/src/components/copyToClipboard/CopyToClipboard.tsx index 289fe8d294..a0af46d01b 100644 --- a/explorer-nextjs/src/components/copyToClipboard/CopyToClipboard.tsx +++ b/explorer-nextjs/src/components/copyToClipboard/CopyToClipboard.tsx @@ -1,9 +1,12 @@ "use client"; -import { IconButton } from "@mui/material"; -import { CopyToClipboard as ReactCopyToClipboard } from "react-copy-to-clipboard"; +import { IconButton, Typography } from "@mui/material"; +import { useCopyToClipboard } from "@uidotdev/usehooks"; +import { useEffect } from "react"; import CopyFile from "../icons/CopyFile"; +const CLEAR_AFTER_MS = 10_000; + const CopyToClipboard = ({ text, Icon, @@ -13,10 +16,31 @@ const CopyToClipboard = ({ Icon?: React.ReactNode; size?: "small" | "medium" | "large"; }) => { + const [copiedText, setCopiedText] = useCopyToClipboard(); + const hasCopied = Boolean(copiedText); + + useEffect(() => { + if (hasCopied) { + const timeout = setTimeout(() => { + setCopiedText(""); + }, CLEAR_AFTER_MS); + + return () => clearTimeout(timeout); + } + }, [hasCopied, setCopiedText]); + + if (hasCopied) { + return ( + + Copied + + ); + } + return ( - - {Icon || } - + setCopiedText(text)}> + {Icon || } + ); }; diff --git a/explorer-nextjs/yarn.lock b/explorer-nextjs/yarn.lock index ebc66adfad..db9d6f9e42 100644 --- a/explorer-nextjs/yarn.lock +++ b/explorer-nextjs/yarn.lock @@ -664,31 +664,15 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2" integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ== -"@types/react-copy-to-clipboard@^5.0.7": - version "5.0.7" - resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz#0cb724d4228f1c2f8f5675671b3971c8801d5f45" - integrity sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ== - dependencies: - "@types/react" "*" - "@types/react-dom@^18": version "18.3.5" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.5.tgz#45f9f87398c5dcea085b715c58ddcf1faf65f716" integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q== "@types/react-transition-group@^4.4.11": - version "4.4.11" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5" - integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA== - dependencies: - "@types/react" "*" - -"@types/react@*": - version "19.0.1" - resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.1.tgz#a000d5b78f473732a08cecbead0f3751e550b3df" - integrity sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ== - dependencies: - csstype "^3.0.2" + version "4.4.12" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044" + integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w== "@types/react@^18": version "18.3.16" @@ -779,6 +763,11 @@ "@typescript-eslint/types" "8.18.0" eslint-visitor-keys "^4.2.0" +"@uidotdev/usehooks@^2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@uidotdev/usehooks/-/usehooks-2.4.1.tgz#4b733eaeae09a7be143c6c9ca158b56cc1ea75bf" + integrity sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg== + "@ungap/structured-clone@^1.2.0": version "1.2.1" resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.1.tgz#28fa185f67daaf7b7a1a8c1d445132c5d979f8bd" @@ -1064,13 +1053,6 @@ convert-source-map@^1.5.0: resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== -copy-to-clipboard@^3.3.1: - version "3.3.3" - resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0" - integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA== - dependencies: - toggle-selection "^1.0.6" - cosmiconfig@^7.0.0: version "7.1.0" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6" @@ -2495,14 +2477,6 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== -react-copy-to-clipboard@^5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c" - integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A== - dependencies: - copy-to-clipboard "^3.3.1" - prop-types "^15.8.1" - react-dom@19.0.0-rc-66855b96-20241106: version "19.0.0-rc-66855b96-20241106" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0-rc-66855b96-20241106.tgz#beba73decfd1b9365a3c83673a298623b15acb0b" @@ -2866,11 +2840,6 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" -toggle-selection@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" - integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ== - ts-api-utils@^1.3.0: version "1.4.3" resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.3.tgz#bfc2215fe6528fecab2b0fba570a2e8a4263b064"