diff --git a/packages/app/src/Components/ProxyImg.tsx b/packages/app/src/Components/ProxyImg.tsx index 796f86ba..ccb76ea2 100644 --- a/packages/app/src/Components/ProxyImg.tsx +++ b/packages/app/src/Components/ProxyImg.tsx @@ -22,7 +22,7 @@ const ProxyImgComponent = forwardRef(function P const { proxy } = useImgProxy(); const [loadFailed, setLoadFailed] = useState(false); const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError); - const [imgSrc, setImgSrc] = useState(proxy(src, size, sha256)); + const [imgSrc, setImgSrc] = useState(src ? proxy(src, size, sha256) : undefined); useEffect(() => { setLoadFailed(false); diff --git a/packages/app/src/Components/User/Avatar.css b/packages/app/src/Components/User/Avatar.css index d92dddaa..f4f97b68 100644 --- a/packages/app/src/Components/User/Avatar.css +++ b/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; } diff --git a/packages/app/src/Components/User/Avatar.tsx b/packages/app/src/Components/User/Avatar.tsx index 10b9cb35..6cf4612d 100644 --- a/packages/app/src/Components/User/Avatar.tsx +++ b/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 (
- setModalImage(user?.picture || "")} className="pointer" /> +
+ setModalImage(user?.picture || "")} className="pointer" size={100} />
{renderButtons()} {!isMe && id && } @@ -111,14 +112,14 @@ const AvatarSection = ({ targets={ lnurl?.lnurl && id ? [ - { - type: "lnurl", - value: lnurl?.lnurl, - weight: 1, - name: user?.display_name || user?.name, - zap: { pubkey: id }, - }, - ] + { + type: "lnurl", + value: lnurl.lnurl, + weight: 1, + name: user?.display_name || user?.name, + zap: { pubkey: id, anon: false } + } as ZapTarget, + ] : undefined } show={showLnQr} diff --git a/packages/app/src/Pages/Profile/ProfileDetails.tsx b/packages/app/src/Pages/Profile/ProfileDetails.tsx index 73d86b90..974c2c57 100644 --- a/packages/app/src/Pages/Profile/ProfileDetails.tsx +++ b/packages/app/src/Pages/Profile/ProfileDetails.tsx @@ -70,14 +70,14 @@ const ProfileDetails = ({ targets={ lnurl?.lnurl && id ? [ - { - type: "lnurl", - value: lnurl?.lnurl, - weight: 1, - name: user?.display_name || user?.name, - zap: { pubkey: id }, - }, - ] + { + type: "lnurl", + value: lnurl?.lnurl, + weight: 1, + name: user?.display_name || user?.name, + zap: { pubkey: id, anon: false }, + }, + ] : undefined } show={showLnQr} diff --git a/packages/app/src/Pages/Profile/ProfilePage.css b/packages/app/src/Pages/Profile/ProfilePage.css index cb01fc69..da423e64 100644 --- a/packages/app/src/Pages/Profile/ProfilePage.css +++ b/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; diff --git a/packages/app/src/Utils/index.ts b/packages/app/src/Utils/index.ts index 1c36c824..afb65ade 100644 --- a/packages/app/src/Utils/index.ts +++ b/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(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 { diff --git a/packages/app/tailwind.config.js b/packages/app/tailwind.config.js index d5f6f5d3..ea78eb12 100644 --- a/packages/app/tailwind.config.js +++ b/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)",