From f0c057871946b825e4d873a9234ef1751e225c6d Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Tue, 1 Nov 2022 18:33:52 +0100
Subject: [PATCH] added ability to copy addresses on AliasDetails.tsx

---
 package.json                                  |   1 +
 public/locales/en/translation.json            |   3 +-
 src/components/ErrorSnack.tsx                 |  12 +-
 src/components/SuccessSnack.tsx               |  14 ++-
 .../AliasDetailRoute/AliasDetails.tsx         | 106 +++++++++++-------
 5 files changed, 88 insertions(+), 48 deletions(-)

diff --git a/package.json b/package.json
index b21a7af..75a34e2 100755
--- a/package.json
+++ b/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",
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 2c45f8b..0e47bd6 100644
--- a/public/locales/en/translation.json
+++ b/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": {
diff --git a/src/components/ErrorSnack.tsx b/src/components/ErrorSnack.tsx
index 3742e67..0bfdd4e 100644
--- a/src/components/ErrorSnack.tsx
+++ b/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>
 	)
diff --git a/src/components/SuccessSnack.tsx b/src/components/SuccessSnack.tsx
index ae6d034..807f326 100644
--- a/src/components/SuccessSnack.tsx
+++ b/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({
-	message,
-}: SuccessSnackProps): ReactElement {
+export default function SuccessSnack({message, onClose}: SuccessSnackProps): ReactElement {
+	const previousMessage = usePrevious(message)
 	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>
 	)
diff --git a/src/route-widgets/AliasDetailRoute/AliasDetails.tsx b/src/route-widgets/AliasDetailRoute/AliasDetails.tsx
index 02ffaa1..b2cbd78 100644
--- a/src/route-widgets/AliasDetailRoute/AliasDetails.tsx
+++ b/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,43 +30,64 @@ 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 item>
-						<AliasTypeIndicator type={aliasUIState.type} />
-					</Grid>
-					<Grid item>
-						<Typography variant="subtitle1">{address}</Typography>
-					</Grid>
-					<Grid item>
-						<ChangeAliasActivationStatusSwitch
-							id={aliasUIState.id}
-							isActive={aliasUIState.isActive}
-							onChanged={setAliasUIState}
-						/>
-					</Grid>
-				</Grid>,
-				<div key="notes">
-					{encryptionStatus === EncryptionStatus.Available ? (
-						<AliasNotesForm
-							id={aliasUIState.id}
-							notes={(aliasUIState as DecryptedAlias).notes}
-							onChanged={setAliasUIState}
-						/>
-					) : (
-						<DecryptionPasswordMissingAlert />
-					)}
-				</div>,
-				<SimplePageBuilder.Section
-					label={t("routes.AliasDetailRoute.sections.settings.title")}
-					key="settings"
-				>
-					<AliasPreferencesForm alias={aliasUIState} onChanged={setAliasUIState} />
-				</SimplePageBuilder.Section>,
-			]}
-		</SimplePageBuilder.MultipleSections>
+		<>
+			<SimplePageBuilder.MultipleSections>
+				{[
+					<Grid key="basic" container spacing={1} direction="row" alignItems="center">
+						<Grid item>
+							<AliasTypeIndicator type={aliasUIState.type} />
+						</Grid>
+						<Grid item>
+							<Button
+								endIcon={<MdContentCopy />}
+								variant="text"
+								color="inherit"
+								onClick={() => {
+									copy(address)
+									setHasCopiedToClipboard(true)
+								}}
+								sx={{textTransform: "none", fontWeight: "normal"}}
+							>
+								{address}
+							</Button>
+						</Grid>
+						<Grid item>
+							<ChangeAliasActivationStatusSwitch
+								id={aliasUIState.id}
+								isActive={aliasUIState.isActive}
+								onChanged={setAliasUIState}
+							/>
+						</Grid>
+					</Grid>,
+					<div key="notes">
+						{encryptionStatus === EncryptionStatus.Available ? (
+							<AliasNotesForm
+								id={aliasUIState.id}
+								notes={(aliasUIState as DecryptedAlias).notes}
+								onChanged={setAliasUIState}
+							/>
+						) : (
+							<DecryptionPasswordMissingAlert />
+						)}
+					</div>,
+					<SimplePageBuilder.Section
+						label={t("routes.AliasDetailRoute.sections.settings.title")}
+						key="settings"
+					>
+						<AliasPreferencesForm alias={aliasUIState} onChanged={setAliasUIState} />
+					</SimplePageBuilder.Section>,
+				]}
+			</SimplePageBuilder.MultipleSections>
+			<SuccessSnack
+				onClose={() => setHasCopiedToClipboard(false)}
+				message={
+					hasCopiedToClipboard &&
+					t("relations.alias.mutations.success.addressCopiedToClipboard")
+				}
+			/>
+		</>
 	)
 }