highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-03-28 02:31:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

update default avatar

Browse Source
This commit is contained in:
Ren Amamiya 2023-08-19 11:18:27 +07:00
parent eda18f8c34
commit 08e3a66ece
27 changed files with 41 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

8
pnpm-lock.yaml generated
View File

@ -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:

3
src/app/auth/components/user.tsx
View File

@ -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 }
<div className="relative h-10 w-10 shrink rounded-md">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-10 w-10 rounded-md object-cover"
/>

3
src/app/auth/components/userRelay.tsx
View File

@ -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 }) {
<div className="inline-flex items-center gap-1">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-5 w-5 shrink-0 rounded object-cover"
/>

5
src/app/auth/create/step-3.tsx
View File

@ -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() {
<div className="relative h-44 w-full bg-white/10">
<Image
src={banner}
fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
alt="user's banner"
className="h-full w-full object-cover"
/>
@ -84,7 +82,6 @@ export function CreateStep3Screen() {
<div className="relative z-10 -mt-7 h-14 w-14">
<Image
src={picture}
fallback={DEFAULT_AVATAR}
alt="user's avatar"
className="h-14 w-14 rounded-lg object-cover ring-2 ring-white/10"
/>

3
src/app/chats/components/item.tsx
View File

@ -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 }) {
>
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={data.sender_pubkey}
className="h-6 w-6 shrink-0 rounded object-cover"
/>

3
src/app/chats/components/self.tsx
View File

@ -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 }) {
>
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-6 w-6 shrink-0 rounded bg-white object-cover"
/>

3
src/app/chats/components/sidebar.tsx
View File

@ -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 }) {
<div className="relative h-11 w-11 shrink rounded-md">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
/>

3
src/app/space/components/modals/feed.tsx
View File

@ -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() {
<div className="flex items-center gap-2">
<img
alt={query}
src={DEFAULT_AVATAR}
className="h-11 w-11 shrink-0 rounded object-cover"
/>
<div className="inline-flex flex-col gap-1">

3
src/app/space/components/modals/image.tsx
View File

@ -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() {
<div className="relative inline-flex h-56 w-full items-center justify-center overflow-hidden rounded-lg bg-white/10">
<Image
src={image}
fallback={DEFAULT_AVATAR}
alt="content"
className="relative z-10 h-auto max-h-[156px] w-[150px] rounded-md object-cover"
/>

3
src/app/trending/components/profile.tsx
View File

@ -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 }) {
<div className="inline-flex items-center gap-2">
<Image
src={profile.picture}
fallback={DEFAULT_AVATAR}
className="h-11 w-11 shrink-0 rounded-lg object-cover"
/>
<div className="inline-flex flex-col gap-1">

10
src/app/users/components/profile.tsx
View File

@ -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 (
<>
<div className="h-56 w-full bg-white">
<Image
src={user?.banner}
fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
alt={'banner'}
className="h-full w-full object-cover"
/>
<img src={user?.banner} alt={'banner'} className="h-full w-full object-cover" />
</div>
<div className="-mt-7 w-full px-5">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-14 w-14 rounded-md ring-2 ring-white/50"
/>

3
src/shared/accounts/active.tsx
View File

@ -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 }
<Link to={`/users/${data.pubkey}`} className="relative inline-block h-9 w-9">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={data.npub}
className="h-9 w-9 rounded-md object-cover"
/>

9
src/shared/accounts/inactive.tsx
View File

@ -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 (
<div className="relative h-9 w-9 shrink-0">
<Image
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.npub}
className="h-9 w-9 rounded object-cover"
/>
<Image src={user?.image} alt={data.npub} className="h-9 w-9 rounded object-cover" />
</div>
);
}

3
src/shared/composer/mention/item.tsx
View File

@ -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 }) {
<div className="h-8 w-8 shrink-0 overflow-hidden rounded-md bg-zinc-900">
<Image
src={profile.picture || profile.image}
fallback={DEFAULT_AVATAR}
alt={profile.pubkey}
className="h-8 w-8 object-cover"
/>

3
src/shared/composer/user.tsx
View File

@ -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 }) {
<div className="flex items-center gap-3">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-8 w-8 shrink-0 rounded-md object-cover"
/>

10
src/shared/editProfileModal.tsx
View File

@ -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() {
/>
<div className="relative">
<div className="relative h-44 w-full bg-zinc-800">
<Image
<img
src={banner}
fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
alt="user's banner"
className="h-full w-full object-cover"
/>
@ -220,7 +217,6 @@ export function EditProfileModal() {
<div className="relative z-10 -mt-7 h-14 w-14">
<Image
src={picture}
fallback={DEFAULT_AVATAR}
alt="user's avatar"
className="h-14 w-14 rounded-lg object-cover ring-2 ring-zinc-900"
/>

28
src/shared/image.tsx
View File

@ -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<any> {
fallback: string;
}
export function Image({ src, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
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 (
<img src={svgURI} alt={props.alt} {...props} style={{ backgroundColor: '#000' }} />
);
}
export function Image({ src, fallback, ...props }: Props) {
return (
<img
{...props}
src={src || fallback}
onError={({ currentTarget }) => {
currentTarget.onerror = null;
currentTarget.src = fallback;
src={src}
onError={() => {
setIsError(true);
}}
decoding="async"
alt="lume default img"

2
src/shared/notes/actions/more.tsx
View File

@ -45,7 +45,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
</Tooltip.Portal>
</Tooltip.Root>
<Popover.Portal>
<Popover.Content className="w-[200px] overflow-hidden rounded-md bg-white/10 backdrop-blur-xl focus:outline-none">
<Popover.Content className="w-[200px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl focus:outline-none">
<div className="flex flex-col p-2">
<Link
to={`/events/${id}`}

3
src/shared/notes/replies/form.tsx
View File

@ -3,7 +3,7 @@ import { useState } from 'react';
import { Button } from '@shared/button';
import { Image } from '@shared/image';
import { DEFAULT_AVATAR, FULL_RELAYS } from '@stores/constants';
import { FULL_RELAYS } from '@stores/constants';
import { useNostr } from '@utils/hooks/useNostr';
import { useProfile } from '@utils/hooks/useProfile';
@ -47,7 +47,6 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
<div className="relative h-11 w-11 shrink-0 rounded">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-lg bg-white object-cover"
/>

5
src/shared/notes/users/mini.tsx
View File

@ -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 (
<Image
src={user?.picture || user?.image || DEFAULT_AVATAR}
fallback={DEFAULT_AVATAR}
src={user?.picture || user?.image}
alt={pubkey}
className="relative z-20 inline-block h-4 w-4 rounded bg-white ring-1 ring-zinc-800"
/>

5
src/shared/notes/users/repost.tsx
View File

@ -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 (
<div className="flex gap-2 pl-6">
<Image
src={user?.picture || user?.image || DEFAULT_AVATAR}
fallback={DEFAULT_AVATAR}
src={user?.picture || user?.image}
alt={pubkey}
className="relative z-20 inline-block h-6 w-6 rounded bg-white ring-1 ring-black"
/>

5
src/shared/notes/users/thread.tsx
View File

@ -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 (
<div className="flex items-center gap-3">
<Image
src={user?.picture || user?.image || DEFAULT_AVATAR}
fallback={DEFAULT_AVATAR}
src={user?.picture || user?.image}
alt={pubkey}
className="relative z-20 inline-block h-11 w-11 rounded-lg"
/>

3
src/shared/notification/user.tsx
View File

@ -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 }) {
<div className="flex shrink-0 items-start justify-start gap-3">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-10 w-10 shrink-0 rounded-md object-cover"
/>

4
src/shared/user.tsx
View File

@ -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({
>
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className={twMerge(
`object-cover ${avatarWidth} ${avatarHeight}`,
@ -99,7 +96,6 @@ export function User({
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 shrink-0 rounded-lg object-cover"
/>

4
src/shared/userProfile.tsx
View File

@ -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 }) {
<div>
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-14 w-14 rounded-md"
/>

2
src/stores/constants.tsx
View File

@ -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',