feat: Add delete alias

public/locales/en-US/translation.json

@@ -203,6 +203,13 @@
                         }
                     }
                 }
+            },
+            "actions": {
+                "delete": {
+                    "label": "Delete Alias",
+                    "description": "Are you sure you want to delete this alias?",
+                    "continueAction": "Delete Alias"
+                }
             }
         },
         "ReportsRoute": {
@@ -506,7 +513,8 @@
                     "notesUpdated": "Updated & encrypted notes successfully!",
                     "aliasChangedToEnabled": "Alias has been enabled",
                     "aliasChangedToDisabled": "Alias has been disabled",
-                    "addressCopiedToClipboard": "Address has been copied to your clipboard!"
+                    "addressCopiedToClipboard": "Address has been copied to your clipboard!",
+                    "aliasDeleted": "Alias has been deleted!"
                 }
             },
             "settings": {

src/apis/delete-alias.ts

@@ -2,7 +2,7 @@ import {client} from "~/constants/axios-client"
 import {SimpleDetailResponse} from "~/server-types"
 
 export default async function deleteAlias(id: string): Promise<SimpleDetailResponse> {
-	const {data} = await client.delete(`${import.meta.env.VITE_SERVER_BASE_URL}/v1/report/${id}`, {
+	const {data} = await client.delete(`${import.meta.env.VITE_SERVER_BASE_URL}/v1/alias/${id}`, {
 		withCredentials: true,
 	})
 

src/routes/AliasDetailRoute.tsx

@@ -6,12 +6,13 @@ import {useTranslation} from "react-i18next"
 import {useQuery} from "@tanstack/react-query"
 import {Grid} from "@mui/material"
 
-import {getAlias} from "~/apis"
+import {deleteAlias, getAlias} from "~/apis"
 import {Alias, DecryptedAlias, ServerSettings} from "~/server-types"
 import {
 	AliasTypeIndicator,
 	AuthContext,
 	DecryptionPasswordMissingAlert,
+	DeleteButton,
 	EncryptionStatus,
 	QueryResult,
 	SimplePage,
@@ -46,7 +47,18 @@ export default function AliasDetailRoute(): ReactElement {
 	return (
 		<SimplePage
 			title={t("routes.AliasDetailRoute.title")}
-			actions={query.data && <DeleteButton id={query.data.id} />}
+			actions={
+				query.data && (
+					<DeleteButton
+						onDelete={() => deleteAlias(aliasID!)}
+						label={t("routes.AliasDetailRoute.actions.delete.label")}
+						description={t("routes.AliasDetailRoute.actions.delete.description")}
+						continueLabel={t("routes.AliasDetailRoute.actions.delete.continueAction")}
+						navigateTo={"/aliases"}
+						successMessage={t("relations.alias.mutations.success.aliasDeleted")}
+					/>
+				)
+			}
 		>
 			<QueryResult<Alias | DecryptedAlias> query={query}>
 				{alias => (