add noProxy prop to user avatar

.changeset/brave-mayflies-laugh.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Dont proxy main user profile image

src/components/profile-button.tsx

@@ -2,7 +2,7 @@ import { Box, LinkBox, Text } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
 import { UserAvatar } from "./user-avatar";
 import { useUserMetadata } from "../hooks/use-user-metadata";
-import { normalizeToBech32 } from "../helpers/nip19";
+import { Bech32Prefix, normalizeToBech32 } from "../helpers/nip19";
 import { truncatedId } from "../helpers/nostr-event";
 import { useCurrentAccount } from "../hooks/use-current-account";
 
@@ -11,8 +11,14 @@ export const ProfileButton = () => {
   const metadata = useUserMetadata(pubkey);
 
   return (
-    <LinkBox as={Link} to={`/u/${pubkey}`} display="flex" gap="2" overflow="hidden">
-      <UserAvatar pubkey={pubkey} />
+    <LinkBox
+      as={Link}
+      to={`/u/${normalizeToBech32(pubkey, Bech32Prefix.Pubkey)}`}
+      display="flex"
+      gap="2"
+      overflow="hidden"
+    >
+      <UserAvatar pubkey={pubkey} noProxy />
       <Box>
         <Text fontWeight="bold">{metadata?.name}</Text>
         <Text>{truncatedId(normalizeToBech32(pubkey) ?? "")}</Text>

src/components/user-avatar.tsx

@@ -15,18 +15,21 @@ export const UserIdenticon = React.memo(({ pubkey }: { pubkey: string }) => {
 
 export type UserAvatarProps = Omit<AvatarProps, "src"> & {
   pubkey: string;
+  noProxy?: boolean;
 };
-export const UserAvatar = React.memo(({ pubkey, ...props }: UserAvatarProps) => {
+export const UserAvatar = React.memo(({ pubkey, noProxy, ...props }: UserAvatarProps) => {
   const { imageProxy, proxyUserMedia } = useSubject(appSettings);
   const metadata = useUserMetadata(pubkey);
   const picture = useMemo(() => {
     if (metadata?.picture) {
       const src = safeUrl(metadata?.picture);
-      if (imageProxy && src) {
-        return new URL(`/96/${src}`, imageProxy).toString();
-      } else if (proxyUserMedia) {
-        const last4 = String(pubkey).slice(pubkey.length - 4, pubkey.length);
-        return `https://media.nostr.band/thumbs/${last4}/${pubkey}-picture-64`;
+      if (!noProxy) {
+        if (imageProxy && src) {
+          return new URL(`/96/${src}`, imageProxy).toString();
+        } else if (proxyUserMedia) {
+          const last4 = String(pubkey).slice(pubkey.length - 4, pubkey.length);
+          return `https://media.nostr.band/thumbs/${last4}/${pubkey}-picture-64`;
+        }
       }
       return src;
     }

src/views/login/components/account-card.tsx

@@ -21,7 +21,7 @@ export default function AccountCard({ pubkey }: { pubkey: string }) {
       cursor="pointer"
       onClick={() => accountService.switchAccount(pubkey)}
     >
-      <UserAvatar pubkey={pubkey} size="sm" />
+      <UserAvatar pubkey={pubkey} size="sm" noProxy />
       <Text flex={1} mr="4" overflow="hidden">
         {getUserDisplayName(metadata, pubkey)}
       </Text>

src/views/user/components/header.tsx

@@ -46,7 +46,7 @@ export default function Header({ pubkey }: { pubkey: string }) {
   return (
     <Flex direction="column" gap="2" px="2" pt="2">
       <Flex gap="4">
-        <UserAvatar pubkey={pubkey} size={isMobile ? "md" : "xl"} />
+        <UserAvatar pubkey={pubkey} size={isMobile ? "md" : "xl"} noProxy />
         <Flex direction="column" gap={isMobile ? 0 : 2} grow="1" overflow="hidden">
           <Flex gap="2" justifyContent="space-between" width="100%">
             <Flex gap="2" alignItems="center" wrap="wrap">