added ability to copy addresses on AliasDetails.tsx

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.1.2",
     "axios-case-converter": "^0.11.1",
     "camelcase-keys": "^8.0.2",
+    "copy-to-clipboard": "^3.3.2",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",
     "deep-equal": "^2.0.5",

public/locales/en/translation.json

@@ -285,7 +285,8 @@
                     "aliasUpdated": "Updated Alias successfully!",
                     "notesUpdated": "Updated & encrypted notes successfully!",
                     "aliasChangedToEnabled": "Alias has been enabled",
-                    "aliasChangedToDisabled": "Alias has been disabled"
+                    "aliasChangedToDisabled": "Alias has been disabled",
+                    "addressCopiedToClipboard": "Address has been copied to your clipboard!"
                 }
             },
             "settings": {

src/components/ErrorSnack.tsx

@@ -1,12 +1,15 @@
+import {usePrevious} from "react-use"
 import React, {ReactElement, useEffect, useState} from "react"
 
 import {Alert, Snackbar} from "@mui/material"
 
 export interface ErrorSnackProps {
 	message?: string | null | false
+	onClose?: () => void
 }
 
-export default function ErrorSnack({message}: ErrorSnackProps): ReactElement {
+export default function ErrorSnack({message, onClose}: ErrorSnackProps): ReactElement {
+	const previousMessage = usePrevious(message)
 	const [open, setOpen] = useState<boolean>(true)
 
 	useEffect(() => {
@@ -18,10 +21,13 @@ export default function ErrorSnack({message}: ErrorSnackProps): ReactElement {
 		<Snackbar
 			open={open}
 			autoHideDuration={5000}
-			onClose={() => setOpen(false)}
+			onClose={() => {
+				setOpen(false)
+				onClose?.()
+			}}
 		>
 			<Alert severity="error" variant="filled">
-				{message}
+				{message || previousMessage}
 			</Alert>
 		</Snackbar>
 	)

src/components/SuccessSnack.tsx

@@ -1,14 +1,15 @@
+import {usePrevious} from "react-use"
 import React, {ReactElement, useEffect, useState} from "react"
 
 import {Alert, Snackbar} from "@mui/material"
 
 export interface SuccessSnackProps {
 	message?: string | null | boolean
+	onClose?: () => void
 }
 
-export default function SuccessSnack({
+export default function SuccessSnack({message, onClose}: SuccessSnackProps): ReactElement {
-	message,
+	const previousMessage = usePrevious(message)
-}: SuccessSnackProps): ReactElement {
 	const [open, setOpen] = useState<boolean>(true)
 
 	useEffect(() => {
@@ -20,10 +21,13 @@ export default function SuccessSnack({
 		<Snackbar
 			open={open}
 			autoHideDuration={2000}
-			onClose={() => setOpen(false)}
+			onClose={() => {
+				setOpen(false)
+				onClose?.()
+			}}
 		>
 			<Alert severity="success" variant="filled">
-				{message}
+				{message || previousMessage}
 			</Alert>
 		</Snackbar>
 	)

src/route-widgets/AliasDetailRoute/AliasDetails.tsx

@@ -1,10 +1,17 @@
 import {useParams} from "react-router"
-import {ReactElement, useContext} from "react"
+import {ReactElement, useContext, useState} from "react"
 import {useTranslation} from "react-i18next"
+import {MdContentCopy} from "react-icons/md"
+import copy from "copy-to-clipboard"
 
-import {Grid, Typography} from "@mui/material"
+import {Button, Grid} from "@mui/material"
 
-import {AliasTypeIndicator, DecryptionPasswordMissingAlert, SimplePageBuilder} from "~/components"
+import {
+	AliasTypeIndicator,
+	DecryptionPasswordMissingAlert,
+	SimplePageBuilder,
+	SuccessSnack,
+} from "~/components"
 import {Alias, DecryptedAlias} from "~/server-types"
 import {useUIState} from "~/hooks"
 import AliasNotesForm from "~/route-widgets/AliasDetailRoute/AliasNotesForm"
@@ -23,16 +30,29 @@ export default function AliasDetails({alias: aliasValue}: AliasDetailsProps): Re
 	const address = atob(params.addressInBase64 as string)
 
 	const [aliasUIState, setAliasUIState] = useUIState<Alias | DecryptedAlias>(aliasValue)
+	const [hasCopiedToClipboard, setHasCopiedToClipboard] = useState<boolean>(false)
 
 	return (
+		<>
 			<SimplePageBuilder.MultipleSections>
 				{[
-				<Grid container spacing={1} direction="row" alignItems="center">
+					<Grid key="basic" container spacing={1} direction="row" alignItems="center">
 						<Grid item>
 							<AliasTypeIndicator type={aliasUIState.type} />
 						</Grid>
 						<Grid item>
-						<Typography variant="subtitle1">{address}</Typography>
+							<Button
+								endIcon={<MdContentCopy />}
+								variant="text"
+								color="inherit"
+								onClick={() => {
+									copy(address)
+									setHasCopiedToClipboard(true)
+								}}
+								sx={{textTransform: "none", fontWeight: "normal"}}
+							>
+								{address}
+							</Button>
 						</Grid>
 						<Grid item>
 							<ChangeAliasActivationStatusSwitch
@@ -61,5 +81,13 @@ export default function AliasDetails({alias: aliasValue}: AliasDetailsProps): Re
 					</SimplePageBuilder.Section>,
 				]}
 			</SimplePageBuilder.MultipleSections>
+			<SuccessSnack
+				onClose={() => setHasCopiedToClipboard(false)}
+				message={
+					hasCopiedToClipboard &&
+					t("relations.alias.mutations.success.addressCopiedToClipboard")
+				}
+			/>
+		</>
 	)
 }