tweak avatars

packages/app/src/Components/ProxyImg.tsx

@@ -22,7 +22,7 @@ const ProxyImgComponent = forwardRef<HTMLImageElement, ProxyImgProps>(function P
   const { proxy } = useImgProxy();
   const [loadFailed, setLoadFailed] = useState(false);
   const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError);
-  const [imgSrc, setImgSrc] = useState<string>(proxy(src, size, sha256));
+  const [imgSrc, setImgSrc] = useState<string | undefined>(src ? proxy(src, size, sha256) : undefined);
 
   useEffect(() => {
     setLoadFailed(false);

packages/app/src/Components/User/Avatar.css

@@ -1,14 +1,7 @@
 .avatar {
-  border-radius: 50%;
+  @apply rounded-full;
   height: 210px;
   width: 210px;
-  background-image: var(--img-url);
-  border: 1px solid transparent;
-  background-origin: border-box;
-  background-clip: content-box, border-box;
-  background-size: cover;
-  box-sizing: border-box;
-  background-position: center;
   background-color: var(--gray);
   z-index: 2;
 }

packages/app/src/Components/User/Avatar.tsx

@@ -30,8 +30,11 @@ const Avatar = ({
   className,
   showTitle = true,
 }: AvatarProps) => {
+  const defaultImg = defaultAvatar(pubkey);
   const url = useMemo(() => {
-    return image ?? user?.picture ?? defaultAvatar(pubkey);
+    if((image?.length ?? 0) > 0) return image;
+    if((user?.picture?.length ?? 0) > 0) return user?.picture;
+    return defaultImg;
   }, [user, image, pubkey]);
 
   const s = size ?? 120;
@@ -42,6 +45,7 @@ const Avatar = ({
   }
 
   const domain = user?.nip05 && user.nip05.split("@")[1];
+  const isDefault = url === defaultImg;
   return (
     <div
       onClick={onClick}
@@ -49,6 +53,7 @@ const Avatar = ({
       className={classNames(
         "avatar relative flex items-center justify-center",
         { "with-overlay": imageOverlay },
+        { "outline outline-2 outline-nostr-purple m-[2px]": isDefault },
         className,
       )}
       data-domain={domain?.toLowerCase()}

packages/app/src/Pages/Profile/AvatarSection.tsx

@@ -15,6 +15,7 @@ import ProfileImage from "@/Components/User/ProfileImage";
 import ZapModal from "@/Components/ZapModal/ZapModal";
 import { hexToBech32 } from "@/Utils";
 import { LoginSessionType, LoginStore } from "@/Utils/Login";
+import { ZapTarget } from "@/Utils/Zapper";
 
 const AvatarSection = ({
   user,
@@ -100,8 +101,8 @@ const AvatarSection = ({
   };
 
   return (
-    <div className="avatar-wrapper w-max">
+    <div className="flex justify-between w-full">
-      <Avatar pubkey={id ?? ""} user={user} onClick={() => setModalImage(user?.picture || "")} className="pointer" />
+      <Avatar pubkey={id ?? ""} user={user} onClick={() => setModalImage(user?.picture || "")} className="pointer" size={100} />
       <div className="profile-actions">
         {renderButtons()}
         {!isMe && id && <FollowButton pubkey={id} />}
@@ -111,14 +112,14 @@ const AvatarSection = ({
         targets={
           lnurl?.lnurl && id
             ? [
-                {
+              {
-                  type: "lnurl",
+                type: "lnurl",
-                  value: lnurl?.lnurl,
+                value: lnurl.lnurl,
-                  weight: 1,
+                weight: 1,
-                  name: user?.display_name || user?.name,
+                name: user?.display_name || user?.name,
-                  zap: { pubkey: id },
+                zap: { pubkey: id, anon: false }
-                },
+              } as ZapTarget,
-              ]
+            ]
             : undefined
         }
         show={showLnQr}

packages/app/src/Pages/Profile/ProfileDetails.tsx

@@ -70,14 +70,14 @@ const ProfileDetails = ({
         targets={
           lnurl?.lnurl && id
             ? [
-                {
+              {
-                  type: "lnurl",
+                type: "lnurl",
-                  value: lnurl?.lnurl,
+                value: lnurl?.lnurl,
-                  weight: 1,
+                weight: 1,
-                  name: user?.display_name || user?.name,
+                name: user?.display_name || user?.name,
-                  zap: { pubkey: id },
+                zap: { pubkey: id, anon: false },
-                },
+              },
-              ]
+            ]
             : undefined
         }
         show={showLnQr}

packages/app/src/Pages/Profile/ProfilePage.css

@@ -66,19 +66,6 @@
   font-size: 15px;
 }
 
-.profile-wrapper > .avatar-wrapper {
-  z-index: 1;
-  display: flex;
-  justify-content: space-between;
-}
-
-.profile-wrapper > .avatar-wrapper .avatar {
-  width: 100px;
-  height: 100px;
-  background-image: var(--img-url);
-  border: 3px solid #fff;
-}
-
 .profile .name {
   display: flex;
   flex-direction: column;

packages/app/src/Utils/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import * as utils from "@noble/curves/abstract/utils";
 import * as secp from "@noble/curves/secp256k1";
 import { hmac } from "@noble/hashes/hmac";
@@ -459,7 +460,7 @@ export function kvToObject<T>(o: string, sep?: string) {
 export function defaultAvatar(input?: string) {
   if (isOffline()) return Nostrich;
   const key = (input?.length ?? 0) === 0 ? "missing" : input;
-  return `https://robohash.v0l.io/${key}.png${isHalloween() ? "?set=set2" : ""}`;
+  return `https://nostr.api.v0l.io/api/v1/avatar/${isHalloween() ? "zombies" : "cyberpunks"}/${key}.webp`;
 }
 
 export function isFormElement(target: HTMLElement): boolean {

packages/app/tailwind.config.js

@@ -10,8 +10,6 @@ module.exports = {
         highlight: "var(--highlight)",
         "bg-color": "var(--bg-color)",
         "bg-secondary": "var(--bg-secondary)",
-      },
-      textColor: {
         "nostr-blue": "var(--repost)",
         "nostr-green": "var(--success)",
         "nostr-orange": "var(--zap)",