From 08e3a66ece255716aaea9402a9a436efe7a2dd17 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Sat, 19 Aug 2023 11:18:27 +0700 Subject: [PATCH] update default avatar --- package.json | 1 + pnpm-lock.yaml | 8 +++++++ src/app/auth/components/user.tsx | 3 --- src/app/auth/components/userRelay.tsx | 3 --- src/app/auth/create/step-3.tsx | 5 +--- src/app/chats/components/item.tsx | 3 --- src/app/chats/components/self.tsx | 3 --- src/app/chats/components/sidebar.tsx | 3 --- src/app/space/components/modals/feed.tsx | 3 +-- src/app/space/components/modals/image.tsx | 3 +-- src/app/trending/components/profile.tsx | 3 --- src/app/users/components/profile.tsx | 10 +------- src/shared/accounts/active.tsx | 3 --- src/shared/accounts/inactive.tsx | 9 +------- src/shared/composer/mention/item.tsx | 3 --- src/shared/composer/user.tsx | 3 --- src/shared/editProfileModal.tsx | 10 +++----- src/shared/image.tsx | 28 +++++++++++++++-------- src/shared/notes/actions/more.tsx | 2 +- src/shared/notes/replies/form.tsx | 3 +-- src/shared/notes/users/mini.tsx | 5 +--- src/shared/notes/users/repost.tsx | 5 +--- src/shared/notes/users/thread.tsx | 5 +--- src/shared/notification/user.tsx | 3 --- src/shared/user.tsx | 4 ---- src/shared/userProfile.tsx | 4 ---- src/stores/constants.tsx | 2 -- 27 files changed, 41 insertions(+), 96 deletions(-) diff --git a/package.json b/package.json index c03eb3b0..c4fb48db 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "html-to-text": "^9.0.5", "light-bolt11-decoder": "^3.0.0", "lru-cache": "^10.0.1", + "minidenticons": "^4.2.0", "nostr-fetch": "^0.12.2", "nostr-tools": "^1.14.0", "qrcode.react": "^3.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 47b3b552..73544dd0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -127,6 +127,9 @@ dependencies: lru-cache: specifier: ^10.0.1 version: 10.0.1 + minidenticons: + specifier: ^4.2.0 + version: 4.2.0 nostr-fetch: specifier: ^0.12.2 version: 0.12.2 @@ -5015,6 +5018,11 @@ packages: engines: {node: '>=4'} dev: false + /minidenticons@4.2.0: + resolution: {integrity: sha512-2T3VU1N30yI3kXMRbdLsJ5DgsBoGLi2+2hbm1xTOU2RQXWW5wwpmz9XQohVSsVlhymf4W69sMGj6s39t796PBA==} + engines: {node: '>=15.14.0'} + dev: false + /minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: diff --git a/src/app/auth/components/user.tsx b/src/app/auth/components/user.tsx index 177e3012..34b0450a 100644 --- a/src/app/auth/components/user.tsx +++ b/src/app/auth/components/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'; @@ -25,7 +23,6 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
{pubkey} diff --git a/src/app/auth/components/userRelay.tsx b/src/app/auth/components/userRelay.tsx index 2280c7db..decb3016 100644 --- a/src/app/auth/components/userRelay.tsx +++ b/src/app/auth/components/userRelay.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'; @@ -26,7 +24,6 @@ export function UserRelay({ pubkey }: { pubkey: string }) {
{pubkey} diff --git a/src/app/auth/create/step-3.tsx b/src/app/auth/create/step-3.tsx index d8dd848a..f9cebf4f 100644 --- a/src/app/auth/create/step-3.tsx +++ b/src/app/auth/create/step-3.tsx @@ -8,7 +8,6 @@ import { LoaderIcon } from '@shared/icons'; import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle'; import { Image } from '@shared/image'; -import { DEFAULT_AVATAR } from '@stores/constants'; import { useOnboarding } from '@stores/onboarding'; import { useNostr } from '@utils/hooks/useNostr'; @@ -18,7 +17,7 @@ export function CreateStep3Screen() { const setStep = useOnboarding((state) => state.setStep); 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 { publish } = useNostr(); @@ -72,7 +71,6 @@ export function CreateStep3Screen() {
user's banner @@ -84,7 +82,6 @@ export function CreateStep3Screen() {
user's avatar 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 }) { > {data.sender_pubkey} 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 }) { > {pubkey} 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 }) {
{pubkey} 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() {
{query}
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() {
content 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 ( <>
- {'banner'} + {'banner'}
{pubkey} 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 } {data.npub} 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 (
- {data.npub} + {data.npub}
); } 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 }) {
{profile.pubkey} 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 }) {
{pubkey} 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() { />
- user's banner @@ -220,7 +217,6 @@ export function EditProfileModal() {
user's avatar 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 ( + {props.alt} + ); + } -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 }) { - +
{pubkey} 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 ( {pubkey} 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 (
{pubkey} 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 (
{pubkey} 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 }) {
{pubkey} 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({ > {pubkey} {pubkey} 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 }) {
{pubkey} 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',