diff --git a/src/initIcons.ts b/src/initIcons.ts
index 805691810..5bfd4bfe6 100644
--- a/src/initIcons.ts
+++ b/src/initIcons.ts
@@ -25,6 +25,8 @@ import {
faSmog,
faSnowflake,
faBoltLightning,
+ faCopy,
+ faCheck,
} from '@fortawesome/free-solid-svg-icons'
library.add(
@@ -52,5 +54,7 @@ library.add(
faMoon,
faSmog,
faSnowflake,
- faBoltLightning
+ faBoltLightning,
+ faCopy,
+ faCheck
)
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 00ef90a6e..afd89af72 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import styles from 'styles/pages/settings.module.scss'
import EditDisplayName from 'components/EditDisplayName/EditDisplayName'
import { withDefaultLayout } from 'layout/DefaultLayout/DefaultLayout'
@@ -6,12 +8,23 @@ import { useUser } from 'hooks/useUser'
import Loader from 'components/Loader/Loader'
const Settings = () => {
- const { loading, portalUser } = useUser()
+ const { loading, portalUser, user } = useUser()
+ const [isCopied, setIsCopied] = useState(false)
const [handleEditDisplayName] = useEditDisplayNameMutation()
const userDisplayName = (portalUser?.displayName || '') as string
+ const copyTextToClipboard = async () => {
+ try {
+ await navigator.clipboard.writeText(user?.userId || '')
+ setIsCopied(true)
+ setTimeout(() => setIsCopied(false), 3000)
+ } catch (err) {
+ console.error('Failed to copy: ', err)
+ }
+ }
+
return loading ? (