fix(notification): deps issues

packages/notification/package.json

@@ -27,10 +27,19 @@
 		},
 		"./package.json": "./package.json"
 	},
+	"dependencies": {
+		"@emotion/react": "^11",
+		"@mantine/core": "^5",
+		"@mantine/modals": "^5",
+		"@mantine/hooks": "^5",
+		"classnames": "^2",
+		"react-intersection-observer": "^9"
+	},
 	"peerDependencies": {
 		"@crossbell/connect-kit": "workspace:*",
 		"@crossbell/util-metadata": "workspace:*",
 		"@crossbell/util-hooks": "workspace:*",
+		"@crossbell/util-ipfs": "workspace:*",
 		"@crossbell/indexer": "workspace:*",
 		"@crossbell/ui": "workspace:*",
 		"react": "18.x.x",

packages/notification/src/notification-modal/components/item.tsx

@@ -1,18 +1,16 @@
 import React from "react";
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import { Indicator } from "@mantine/core";
+// https://github.com/iamkun/dayjs/issues/1167
+import relativeTime from "dayjs/plugin/relativeTime.js";
+import { Indicator, Avatar } from "@mantine/core";
 
 import { ParsedNotification } from "@crossbell/indexer";
 import { CrossbellChainLogo } from "@crossbell/ui";
 import { extractCharacterName } from "@crossbell/util-metadata";
 
-import { Avatar } from "~/shared/components/avatar";
-import {
-	composeCharacterHref,
-	composeNoteHref,
-	composeScanTxHref,
-} from "~/shared/url";
+import { useCharacterAvatar } from "~/shared/components/avatar/use-character-avatar";
+import { composeCharacterHref, composeNoteHref } from "~/shared/url/href";
+import { composeScanTxHref } from "~/shared/url/href-external";
 
 import styles from "./item.module.css";
 
@@ -24,11 +22,13 @@ export type ItemProps = {
 };
 
 export function Item({ notification, isRead }: ItemProps) {
-	if (!notification) return null;
-
 	const character = notification.fromCharacter;
 	const titleInfo = getTitleInfo(notification);
 
+	const avatar = useCharacterAvatar(character);
+
+	if (!notification) return null;
+
 	return (
 		<div className={styles.container}>
 			<a
@@ -37,7 +37,7 @@ export function Item({ notification, isRead }: ItemProps) {
 				rel="noreferrer"
 			>
 				<Indicator size={9} disabled={isRead} color="red" offset={4.5}>
-					<Avatar character={character} />
+					<Avatar radius="xl" src={avatar.src} />
 				</Indicator>
 			</a>
 			<div className={styles.main}>