diff --git a/src/app/chats/components/item.tsx b/src/app/chats/components/item.tsx
index bf2442ff..1c23014b 100644
--- a/src/app/chats/components/item.tsx
+++ b/src/app/chats/components/item.tsx
@@ -3,8 +3,6 @@ import { twMerge } from 'tailwind-merge';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
import { Chats } from '@utils/types';
@@ -34,7 +32,6 @@ export function ChatsListItem({ data }: { data: Chats }) {
>
diff --git a/src/app/chats/components/self.tsx b/src/app/chats/components/self.tsx
index f1aed6e8..b0a9ec16 100644
--- a/src/app/chats/components/self.tsx
+++ b/src/app/chats/components/self.tsx
@@ -3,8 +3,6 @@ import { twMerge } from 'tailwind-merge';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
@@ -33,7 +31,6 @@ export function ChatsListSelfItem({ pubkey }: { pubkey: string }) {
>
diff --git a/src/app/chats/components/sidebar.tsx b/src/app/chats/components/sidebar.tsx
index f85ba93b..987cc02e 100644
--- a/src/app/chats/components/sidebar.tsx
+++ b/src/app/chats/components/sidebar.tsx
@@ -2,8 +2,6 @@ import { Link } from 'react-router-dom';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
@@ -16,7 +14,6 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {
diff --git a/src/app/space/components/modals/feed.tsx b/src/app/space/components/modals/feed.tsx
index b7e42b5b..e35dfc2e 100644
--- a/src/app/space/components/modals/feed.tsx
+++ b/src/app/space/components/modals/feed.tsx
@@ -10,7 +10,7 @@ import { useStorage } from '@libs/storage/provider';
import { CancelIcon, CheckCircleIcon, CommandIcon, LoaderIcon } from '@shared/icons';
-import { DEFAULT_AVATAR, widgetKinds } from '@stores/constants';
+import { widgetKinds } from '@stores/constants';
import { useWidgets } from '@stores/widgets';
export function FeedModal() {
@@ -134,7 +134,6 @@ export function FeedModal() {
diff --git a/src/app/space/components/modals/image.tsx b/src/app/space/components/modals/image.tsx
index 170df528..f6dc09c8 100644
--- a/src/app/space/components/modals/image.tsx
+++ b/src/app/space/components/modals/image.tsx
@@ -7,7 +7,7 @@ import { useStorage } from '@libs/storage/provider';
import { CancelIcon, CommandIcon, LoaderIcon } from '@shared/icons';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR, widgetKinds } from '@stores/constants';
+import { widgetKinds } from '@stores/constants';
import { useWidgets } from '@stores/widgets';
import { useImageUploader } from '@utils/hooks/useUploader';
@@ -123,7 +123,6 @@ export function ImageModal() {
diff --git a/src/app/trending/components/profile.tsx b/src/app/trending/components/profile.tsx
index 390b7576..07cf74c6 100644
--- a/src/app/trending/components/profile.tsx
+++ b/src/app/trending/components/profile.tsx
@@ -4,8 +4,6 @@ import { useEffect, useState } from 'react';
import { FollowIcon, LoaderIcon, UnfollowIcon } from '@shared/icons';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useSocial } from '@utils/hooks/useSocial';
import { compactNumber } from '@utils/number';
import { shortenKey } from '@utils/shortenKey';
@@ -73,7 +71,6 @@ export function Profile({ data }: { data: any }) {
diff --git a/src/app/users/components/profile.tsx b/src/app/users/components/profile.tsx
index 95fe5eda..f1caadc2 100644
--- a/src/app/users/components/profile.tsx
+++ b/src/app/users/components/profile.tsx
@@ -8,8 +8,6 @@ import { useStorage } from '@libs/storage/provider';
import { EditProfileModal } from '@shared/editProfileModal';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
import { useSocial } from '@utils/hooks/useSocial';
import { shortenKey } from '@utils/shortenKey';
@@ -54,17 +52,11 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
return (
<>
-
+
diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx
index c15d4184..53f12f91 100644
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -3,8 +3,6 @@ import { Link } from 'react-router-dom';
import { Image } from '@shared/image';
import { NetworkStatusIndicator } from '@shared/networkStatusIndicator';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
export function ActiveAccount({ data }: { data: { pubkey: string; npub: string } }) {
@@ -18,7 +16,6 @@ export function ActiveAccount({ data }: { data: { pubkey: string; npub: string }
diff --git a/src/shared/accounts/inactive.tsx b/src/shared/accounts/inactive.tsx
index 700a10c8..dd7275af 100644
--- a/src/shared/accounts/inactive.tsx
+++ b/src/shared/accounts/inactive.tsx
@@ -1,7 +1,5 @@
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
export function InactiveAccount({ data }: { data: any }) {
@@ -9,12 +7,7 @@ export function InactiveAccount({ data }: { data: any }) {
return (
-
+
);
}
diff --git a/src/shared/composer/mention/item.tsx b/src/shared/composer/mention/item.tsx
index a97a52a3..0f838971 100644
--- a/src/shared/composer/mention/item.tsx
+++ b/src/shared/composer/mention/item.tsx
@@ -1,7 +1,5 @@
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { displayNpub } from '@utils/shortenKey';
import { Profile } from '@utils/types';
@@ -11,7 +9,6 @@ export function MentionItem({ profile }: { profile: Profile }) {
diff --git a/src/shared/composer/user.tsx b/src/shared/composer/user.tsx
index a85afd74..0e4e6262 100644
--- a/src/shared/composer/user.tsx
+++ b/src/shared/composer/user.tsx
@@ -1,7 +1,5 @@
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
export function ComposerUser({ pubkey }: { pubkey: string }) {
@@ -11,7 +9,6 @@ export function ComposerUser({ pubkey }: { pubkey: string }) {
diff --git a/src/shared/editProfileModal.tsx b/src/shared/editProfileModal.tsx
index e37e2c54..e07156ab 100644
--- a/src/shared/editProfileModal.tsx
+++ b/src/shared/editProfileModal.tsx
@@ -11,8 +11,6 @@ import { BannerUploader } from '@shared/bannerUploader';
import { CancelIcon, CheckCircleIcon, LoaderIcon, UnverifiedIcon } from '@shared/icons';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useNostr } from '@utils/hooks/useNostr';
export function EditProfileModal() {
@@ -20,7 +18,7 @@ export function EditProfileModal() {
const [isOpen, setIsOpen] = useState(false);
const [loading, setLoading] = useState(false);
- const [picture, setPicture] = useState(DEFAULT_AVATAR);
+ const [picture, setPicture] = useState('https://void.cat/d/5VKmKyuHyxrNMf9bWSVPih');
const [banner, setBanner] = useState('');
const [nip05, setNIP05] = useState({ verified: false, text: '' });
@@ -126,7 +124,7 @@ export function EditProfileModal() {
// reset state
setLoading(false);
setIsOpen(false);
- setPicture(DEFAULT_AVATAR);
+ setPicture('https://void.cat/d/5VKmKyuHyxrNMf9bWSVPih');
setBanner(null);
}, 1200);
} else {
@@ -206,9 +204,8 @@ export function EditProfileModal() {
/>
-
@@ -220,7 +217,6 @@ export function EditProfileModal() {
diff --git a/src/shared/image.tsx b/src/shared/image.tsx
index 7e3a82c4..64afbb33 100644
--- a/src/shared/image.tsx
+++ b/src/shared/image.tsx
@@ -1,17 +1,27 @@
-import { ImgHTMLAttributes } from 'react';
+import { minidenticon } from 'minidenticons';
+import { ImgHTMLAttributes, useState } from 'react';
+import { useMemo } from 'react';
-interface Props extends ImgHTMLAttributes
{
- fallback: string;
-}
+export function Image({ src, ...props }: ImgHTMLAttributes) {
+ const [isError, setIsError] = useState(false);
+
+ if (isError || !src) {
+ const svgURI = useMemo(
+ () =>
+ 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(props.alt, 90, 50)),
+ [props.alt]
+ );
+ return (
+
+ );
+ }
-export function Image({ src, fallback, ...props }: Props) {
return (
{
- currentTarget.onerror = null;
- currentTarget.src = fallback;
+ src={src}
+ onError={() => {
+ setIsError(true);
}}
decoding="async"
alt="lume default img"
diff --git a/src/shared/notes/actions/more.tsx b/src/shared/notes/actions/more.tsx
index 6e352139..ee729df0 100644
--- a/src/shared/notes/actions/more.tsx
+++ b/src/shared/notes/actions/more.tsx
@@ -45,7 +45,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
-
+
diff --git a/src/shared/notes/users/mini.tsx b/src/shared/notes/users/mini.tsx
index ad3860f4..d04799c1 100644
--- a/src/shared/notes/users/mini.tsx
+++ b/src/shared/notes/users/mini.tsx
@@ -1,7 +1,5 @@
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
export function MiniUser({ pubkey }: { pubkey: string }) {
@@ -13,8 +11,7 @@ export function MiniUser({ pubkey }: { pubkey: string }) {
return (
diff --git a/src/shared/notes/users/repost.tsx b/src/shared/notes/users/repost.tsx
index 99aa6f73..d2029042 100644
--- a/src/shared/notes/users/repost.tsx
+++ b/src/shared/notes/users/repost.tsx
@@ -1,7 +1,5 @@
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
@@ -15,8 +13,7 @@ export function RepostUser({ pubkey }: { pubkey: string }) {
return (
diff --git a/src/shared/notes/users/thread.tsx b/src/shared/notes/users/thread.tsx
index 9750174d..0411a34f 100644
--- a/src/shared/notes/users/thread.tsx
+++ b/src/shared/notes/users/thread.tsx
@@ -1,8 +1,6 @@
import { VerticalDotsIcon } from '@shared/icons';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { formatCreatedAt } from '@utils/createdAt';
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
@@ -18,8 +16,7 @@ export function ThreadUser({ pubkey, time }: { pubkey: string; time: number }) {
return (
diff --git a/src/shared/notification/user.tsx b/src/shared/notification/user.tsx
index bc7dbe29..b7683453 100644
--- a/src/shared/notification/user.tsx
+++ b/src/shared/notification/user.tsx
@@ -1,7 +1,5 @@
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
@@ -23,7 +21,6 @@ export function NotiUser({ pubkey }: { pubkey: string }) {
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index eca23ae0..a498c7fd 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -4,8 +4,6 @@ import { twMerge } from 'tailwind-merge';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { formatCreatedAt } from '@utils/createdAt';
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
@@ -63,7 +61,6 @@ export function User({
>
diff --git a/src/shared/userProfile.tsx b/src/shared/userProfile.tsx
index f6d83a21..2f2959a9 100644
--- a/src/shared/userProfile.tsx
+++ b/src/shared/userProfile.tsx
@@ -3,11 +3,8 @@ import { Link } from 'react-router-dom';
import { UserMetadata } from '@app/users/components/metadata';
-import { ZapIcon } from '@shared/icons';
import { Image } from '@shared/image';
-import { DEFAULT_AVATAR } from '@stores/constants';
-
import { useProfile } from '@utils/hooks/useProfile';
import { useSocial } from '@utils/hooks/useSocial';
import { displayNpub } from '@utils/shortenKey';
@@ -52,7 +49,6 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
diff --git a/src/stores/constants.tsx b/src/stores/constants.tsx
index f57780d5..d55e070f 100644
--- a/src/stores/constants.tsx
+++ b/src/stores/constants.tsx
@@ -1,5 +1,3 @@
-export const DEFAULT_AVATAR = 'https://void.cat/d/5VKmKyuHyxrNMf9bWSVPih';
-
export const FULL_RELAYS = [
'wss://relay.damus.io',
'wss://relay.nostr.band/all',