diff --git a/src/route-widgets/AliasesRoute/AliasesDetails.tsx b/src/route-widgets/AliasesRoute/AliasesDetails.tsx index 23411ef..00b83ea 100644 --- a/src/route-widgets/AliasesRoute/AliasesDetails.tsx +++ b/src/route-widgets/AliasesRoute/AliasesDetails.tsx @@ -1,14 +1,19 @@ -import {ReactElement} from "react" +import {ReactElement, useState} from "react" +import {useTranslation} from "react-i18next" +import {useKeyPress} from "react-use" +import {MdContentCopy} from "react-icons/md" +import copy from "copy-to-clipboard" import { Grid, List, ListItemButton, ListItemIcon, + ListItemSecondaryAction, ListItemText, } from "@mui/material" -import {AliasTypeIndicator} from "~/components" +import {AliasTypeIndicator, SuccessSnack} from "~/components" import {AliasList} from "~/server-types" import {useUIState} from "~/hooks" import CreateAliasButton from "~/route-widgets/AliasesRoute/CreateAliasButton" @@ -17,13 +22,14 @@ export interface AliasesDetailsProps { aliases: AliasList[] } -const getAddress = (alias: AliasList): string => - `${alias.local}@${alias.domain}` +const getAddress = (alias: AliasList): string => `${alias.local}@${alias.domain}` + +export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactElement { + const {t} = useTranslation() + const [isInCopyAddressMode] = useKeyPress("Control") -export default function AliasesDetails({ - aliases, -}: AliasesDetailsProps): ReactElement { const [aliasesUIState, setAliasesUIState] = useUIState(aliases) + const [hasCopiedToClipboard, setHasCopiedToClipboard] = useState(false) return ( <> @@ -33,12 +39,25 @@ export default function AliasesDetails({ {aliasesUIState.map(alias => ( { + if (isInCopyAddressMode) { + event.preventDefault() + event.stopPropagation() + copy(getAddress(alias)) + setHasCopiedToClipboard(true) + } + }} href={`/aliases/${btoa(getAddress(alias))}`} > + {isInCopyAddressMode && ( + + + + )} ))} @@ -46,14 +65,18 @@ export default function AliasesDetails({ - setAliasesUIState(currentAliases => [ - alias, - ...currentAliases, - ]) + setAliasesUIState(currentAliases => [alias, ...currentAliases]) } /> + setHasCopiedToClipboard(false)} + message={ + hasCopiedToClipboard && + t("relations.alias.mutations.success.addressCopiedToClipboard") + } + /> ) }