diff --git a/web/modals/user-profile/user-profile.react.js b/web/modals/user-profile/user-profile.react.js --- a/web/modals/user-profile/user-profile.react.js +++ b/web/modals/user-profile/user-profile.react.js @@ -5,6 +5,7 @@ import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import { stringForUserExplicit } from 'lib/shared/user-utils.js'; import type { UserInfo } from 'lib/types/user-types'; +import sleep from 'lib/utils/sleep.js'; import css from './user-profile.css'; import UserAvatar from '../../avatars/user-avatar.react.js'; @@ -18,14 +19,32 @@ const usernameText = stringForUserExplicit(userInfo); + const [usernameCopied, setUsernameCopied] = React.useState(false); + + const onClickCopyUsername = React.useCallback(async () => { + if (usernameCopied) { + return; + } + + await navigator.clipboard.writeText(usernameText); + setUsernameCopied(true); + await sleep(3000); + setUsernameCopied(false); + }, [usernameCopied, usernameText]); + return (
{usernameText}
-
- -

Copy username

+
+ +

+ {!usernameCopied ? 'Copy username' : 'Username copied!'} +