update default avatar

2023-08-19 11:18:27 +07:00 · 2023-08-19 11:18:27 +07:00 · 08e3a66ece
parent eda18f8c34
commit 08e3a66ece
27 changed files with 41 additions and 96 deletions
--- 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",
--- 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:
--- 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 }
      <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"
        />
--- 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 }) {
      <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"
        />
--- 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() {
            <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"
                />
--- 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 }) {
    >
      <Image
        src={user?.picture || user?.image}
-        fallback={DEFAULT_AVATAR}
        alt={data.sender_pubkey}
        className="h-6 w-6 shrink-0 rounded object-cover"
      />
--- 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 }) {
    >
      <Image
        src={user?.picture || user?.image}
-        fallback={DEFAULT_AVATAR}
        alt={pubkey}
        className="h-6 w-6 shrink-0 rounded bg-white object-cover"
      />
--- 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 }) {
        <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"
          />
--- 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() {
                                  <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">
--- 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() {
                  <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"
                    />
--- 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 }) {
        <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">
--- 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 (
    <>
      <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"
        />
--- 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 }
    <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"
      />
--- 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 (
    <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>
  );
 }
--- 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 }) {
      <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"
        />
--- 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 }) {
    <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"
      />
--- 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() {
                    />
                    <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"
                          />
--- 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<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"
--- 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 }) {
        </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}`}
--- a/src/shared/notes/replies/form.tsx
+++ b/src/shared/notes/replies/form.tsx
@ -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"
                />
--- 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 (
    <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"
    />
--- 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 (
    <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"
      />
--- 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 (
    <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"
      />
--- 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 }) {
    <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"
      />
--- 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({
          >
            <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"
            />
--- 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 }) {
    <div>
      <Image
        src={user?.picture || user?.image}
-        fallback={DEFAULT_AVATAR}
        alt={pubkey}
        className="h-14 w-14 rounded-md"
      />
--- 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',