Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-19 15:55:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

added ability to copy addresses on AliasDetails.tsx

Browse Source
This commit is contained in:
Myzel394 2022-11-01 18:33:52 +01:00
parent e4acfb2a5d
commit f0c0578719
5 changed files with 88 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

3
public/locales/en/translation.json
View File

@ -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": {

12
src/components/ErrorSnack.tsx
View File

@ -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>
)

14
src/components/SuccessSnack.tsx
View File

@ -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>
)

106
src/route-widgets/AliasDetailRoute/AliasDetails.tsx
View File

@ -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")
}
/>
</>
)
}