tkey address in settings

packages/files-ui/src/Components/Modules/Settings/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react"
+import React, { useState } from "react"
 import * as yup from "yup"
 import {
   FormikTextInput,
@@ -22,6 +22,7 @@ import { centerEllipsis } from "../../../Utils/Helpers"
 import { CSFTheme } from "../../../Themes/types"
 import clsx from "clsx"
 import LanguageSelection from "./LanguageSelection"
+import { useThresholdKey } from "../../../Contexts/ThresholdKeyContext"
 
 const useStyles = makeStyles(({ constants, breakpoints, palette, typography }: CSFTheme) =>
   createStyles({
@@ -137,6 +138,7 @@ const ProfileView = () => {
   const { themeKey, setTheme } = useThemeSwitcher()
   const { addToastMessage } = useToaster()
   const { profile, updateProfile } = useUser()
+  const { publicKey } = useThresholdKey()
   const [updatingProfile, setUpdatingProfile] = useState(false)
 
   const onUpdateProfile = async (firstName: string, lastName: string) => {
@@ -153,21 +155,33 @@ const ProfileView = () => {
 
   const classes = useStyles()
 
-  const [copied, setCopied] = useState(false)
+  const [copiedWalletAddress, setCopiedWalletAddress] = useState(false)
+  const [copiedTkeyAddress, setCopiedTkeyAddress] = useState(false)
 
-  // TODO useCallback is maybe not needed here
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedSwitchCopied = useCallback(
-    debounce(() => setCopied(false), 3000),
-    []
-  )
+  const debouncedCopiedWalletAddress =
+    debounce(() => setCopiedWalletAddress(false), 3000)
+
+  const debouncedCopiedTkeyAddress =
+    debounce(() => setCopiedTkeyAddress(false), 3000)
 
-  const copyAddress = async () => {
+  const copyWalletAddress = async () => {
     if (profile?.publicAddress) {
       try {
         await navigator.clipboard.writeText(profile.publicAddress)
-        setCopied(true)
-        debouncedSwitchCopied()
+        setCopiedWalletAddress(true)
+        debouncedCopiedWalletAddress()
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  }
+
+  const copyTkeyAddress = async () => {
+    if (publicKey) {
+      try {
+        await navigator.clipboard.writeText(publicKey)
+        setCopiedTkeyAddress(true)
+        debouncedCopiedTkeyAddress()
       } catch (err) {
         console.error(err)
       }
@@ -221,15 +235,15 @@ const ProfileView = () => {
                         >
                           <Trans>Wallet address</Trans>
                         </Typography>
-                        {copied && (
+                        {copiedWalletAddress && (
                           <Typography>
                             <Trans>Copied!</Trans>
                           </Typography>
                         )}
                       </div>
                       <div
                         className={classes.copyBox}
-                        onClick={copyAddress}
+                        onClick={copyWalletAddress}
                       >
                         <Typography
                           variant="body1"
@@ -242,6 +256,39 @@ const ProfileView = () => {
                       </div>
                     </div>
                   ) : null}
+                  {publicKey ? (
+                    <div
+                      className={classes.boxContainer}
+                      data-cy="settings-profile-header"
+                    >
+                      <div className={classes.walletAddressContainer}>
+                        <Typography
+                          variant="body1"
+                          className={classes.label}
+                        >
+                          <Trans>Files address</Trans>
+                        </Typography>
+                        {copiedTkeyAddress && (
+                          <Typography>
+                            <Trans>Copied!</Trans>
+                          </Typography>
+                        )}
+                      </div>
+                      <div
+                        className={classes.copyBox}
+                        onClick={copyTkeyAddress}
+                      >
+                        <Typography
+                          variant="body1"
+                          component="p"
+                          className={classes.publicAddress}
+                        >
+                          {centerEllipsis(publicKey, 16)}
+                        </Typography>
+                        <CopyIcon className={classes.copyIcon} />
+                      </div>
+                    </div>
+                  ) : null}
                   <div className={classes.boxContainer}>
                     <FormikTextInput
                       placeholder={t`First name`}

packages/files-ui/src/locales/en/messages.po

@@ -220,6 +220,9 @@ msgstr "File size"
 msgid "Files"
 msgstr "Files"
 
+msgid "Files address"
+msgstr "Files address"
+
 msgid "Files uses device backups to save your browser."
 msgstr "Files uses device backups to save your browser."
 

packages/files-ui/src/locales/fr/messages.po

@@ -221,6 +221,9 @@ msgstr "Taille"
 msgid "Files"
 msgstr "Fichiers"
 
+msgid "Files address"
+msgstr ""
+
 msgid "Files uses device backups to save your browser."
 msgstr "Files enregistre ce navigateur."