From 1998b430a048ef7256b811d3efc9fb5c56799fc7 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sat, 29 Oct 2022 17:32:00 +0200
Subject: [PATCH] added AliasTypeIndicator.tsx

---
 src/components/AliasTypeIndicator.tsx         | 32 +++++++++++++++++++
 .../AliasesRoute/AliasListItem.tsx            |  5 ++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AliasTypeIndicator.tsx

diff --git a/src/components/AliasTypeIndicator.tsx b/src/components/AliasTypeIndicator.tsx
new file mode 100644
index 0000000..19d868f
--- /dev/null
+++ b/src/components/AliasTypeIndicator.tsx
@@ -0,0 +1,32 @@
+import {ReactElement} from "react"
+import {FaHashtag, FaRandom} from "react-icons/fa"
+
+import {Box, Tooltip} from "@mui/material"
+
+import {AliasType} from "~/server-types"
+
+export interface AliasTypeIndicatorProps {
+	type: AliasType
+}
+
+const ALIAS_TYPE_ICON_MAP: Record<AliasType, ReactElement> = {
+	[AliasType.RANDOM]: <FaRandom />,
+	[AliasType.CUSTOM]: <FaHashtag />,
+}
+
+const ALIAS_TYPE_TOOLTIP_MAP: Record<AliasType, string> = {
+	[AliasType.RANDOM]: "This is a randomly generated alias",
+	[AliasType.CUSTOM]: "This is a custom-made alias",
+}
+
+export default function AliasTypeIndicator({
+	type,
+}: AliasTypeIndicatorProps): ReactElement {
+	return (
+		<Tooltip title={ALIAS_TYPE_TOOLTIP_MAP[type]} arrow>
+			<Box display="flex" justifyContent="center" alignItems="center">
+				{ALIAS_TYPE_ICON_MAP[type]}
+			</Box>
+		</Tooltip>
+	)
+}
diff --git a/src/route-widgets/AliasesRoute/AliasListItem.tsx b/src/route-widgets/AliasesRoute/AliasListItem.tsx
index 3910e5c..19b0c78 100644
--- a/src/route-widgets/AliasesRoute/AliasListItem.tsx
+++ b/src/route-widgets/AliasesRoute/AliasListItem.tsx
@@ -4,6 +4,7 @@ import {FaHashtag, FaRandom} from "react-icons/fa"
 import {ListItemButton, ListItemIcon, ListItemText} from "@mui/material"
 
 import {AliasList, AliasType} from "~/server-types"
+import AliasTypeIndicator from "~/components/AliasTypeIndicator"
 
 export interface AliasListItemProps {
 	alias: AliasList
@@ -21,7 +22,9 @@ export default function AliasListItem({
 
 	return (
 		<ListItemButton href={`/aliases/${btoa(address)}`}>
-			<ListItemIcon>{ALIAS_TYPE_ICON_MAP[alias.type]}</ListItemIcon>
+			<ListItemIcon>
+				<AliasTypeIndicator type={alias.type} />
+			</ListItemIcon>
 			<ListItemText primary={address} />
 		</ListItemButton>
 	)