added AliasTypeIndicator.tsx

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>
+	)
+}

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