Add option to hide usernames

.changeset/afraid-apricots-fix.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add option to hide usernames

src/components/embed-event/event-types/embedded-article.tsx

@@ -10,7 +10,7 @@ import { NostrEvent } from "../../../types/nostr-event";
 import { buildAppSelectUrl } from "../../../helpers/nostr/apps";
 import { getSharableEventAddress } from "../../../helpers/nip19";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import Timestamp from "../../timestamp";
 
 export default function EmbeddedArticle({ article, ...props }: Omit<CardProps, "children"> & { article: NostrEvent }) {

src/components/embed-event/event-types/embedded-badge.tsx

@@ -13,7 +13,7 @@ import {
 } from "@chakra-ui/react";
 
 import UserAvatarLink from "../../../components/user-avatar-link";
-import { UserLink } from "../../../components/user-link";
+import UserLink from "../../../components/user-link";
 import { getSharableEventAddress } from "../../../helpers/nip19";
 import { NostrEvent } from "../../../types/nostr-event";
 import { getBadgeDescription, getBadgeImage, getBadgeName } from "../../../helpers/nostr/badges";

src/components/embed-event/event-types/embedded-channel.tsx

@@ -3,7 +3,7 @@ import { Box, Card, CardBody, CardFooter, CardHeader, CardProps, Flex, Heading,
 import { nip19 } from "nostr-tools";
 
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import { NostrEvent } from "../../../types/nostr-event";
 import useChannelMetadata from "../../../hooks/use-channel-metadata";
 import HoverLinkOverlay from "../../hover-link-overlay";

src/components/embed-event/event-types/embedded-community.tsx

@@ -3,7 +3,7 @@ import { Card, CardFooter, CardHeader, CardProps, Heading, LinkBox, LinkOverlay,
 import { nip19 } from "nostr-tools";
 
 import UserAvatarLink from "../../../components/user-avatar-link";
-import { UserLink } from "../../../components/user-link";
+import UserLink from "../../../components/user-link";
 import { NostrEvent } from "../../../types/nostr-event";
 import { getCommunityImage, getCommunityName } from "../../../helpers/nostr/communities";
 

src/components/embed-event/event-types/embedded-dm.tsx

@@ -3,7 +3,7 @@ import { Card, CardBody, CardHeader, CardProps, LinkBox, Spacer, Text } from "@c
 import { NostrEvent } from "../../../types/nostr-event";
 import { TrustProvider } from "../../../providers/trust";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import Timestamp from "../../timestamp";
 import DecryptPlaceholder from "../../../views/messages/decrypt-placeholder";
 import { MessageContent } from "../../../views/messages/message";

src/components/embed-event/event-types/embedded-emoji-pack.tsx

@@ -16,7 +16,7 @@ import { Link as RouterLink } from "react-router-dom";
 import { getSharableEventAddress } from "../../../helpers/nip19";
 import { getEmojisFromPack, getPackName } from "../../../helpers/nostr/emoji-packs";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import EmojiPackFavoriteButton from "../../../views/emoji-packs/components/emoji-pack-favorite-button";
 import EmojiPackMenu from "../../../views/emoji-packs/components/emoji-pack-menu";
 import { NostrEvent } from "../../../types/nostr-event";

src/components/embed-event/event-types/embedded-goal.tsx

@@ -5,7 +5,7 @@ import { getSharableEventAddress } from "../../../helpers/nip19";
 import { NostrEvent } from "../../../types/nostr-event";
 import { getGoalName } from "../../../helpers/nostr/goal";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import GoalProgress from "../../../views/goals/components/goal-progress";
 import GoalZapButton from "../../../views/goals/components/goal-zap-button";
 import GoalTopZappers from "../../../views/goals/components/goal-top-zappers";

src/components/embed-event/event-types/embedded-list.tsx

@@ -6,7 +6,7 @@ import { getListDescription, getListName, isSpecialListKind } from "../../../hel
 import { createCoordinate } from "../../../services/replaceable-event-requester";
 import { getSharableEventAddress } from "../../../helpers/nip19";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import ListFeedButton from "../../../views/lists/components/list-feed-button";
 import { ListCardContent } from "../../../views/lists/components/list-card";
 

src/components/embed-event/event-types/embedded-note.tsx

@@ -4,7 +4,7 @@ import { Link as RouterLink } from "react-router-dom";
 
 import { NostrEvent } from "../../../types/nostr-event";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import { UserDnsIdentityIcon } from "../../user-dns-identity-icon";
 import useSubject from "../../../hooks/use-subject";
 import appSettings from "../../../services/settings/app-settings";

src/components/embed-event/event-types/embedded-reaction.tsx

@@ -3,7 +3,7 @@ import { Card, CardProps, Flex, LinkBox, Spacer, Text } from "@chakra-ui/react";
 import { NostrEvent } from "../../../types/nostr-event";
 import { TrustProvider } from "../../../providers/trust";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import Timestamp from "../../timestamp";
 import ReactionIcon from "../../event-reactions/reaction-icon";
 import { NoteLink } from "../../note-link";

src/components/embed-event/event-types/embedded-stemstr-track.tsx

@@ -17,7 +17,7 @@ import {
 
 import { NostrEvent } from "../../../types/nostr-event";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import { CompactNoteContent } from "../../compact-note-content";
 import { getDownloadURL, getHashtags, getStreamURL } from "../../../helpers/nostr/stemstr";
 import { DownloadIcon, ReplyIcon } from "../../icons";

src/components/embed-event/event-types/embedded-stream-message.tsx

@@ -2,7 +2,7 @@ import { Box, Card, CardProps, Divider, Flex, Link, Text } from "@chakra-ui/reac
 import { Link as RouterLink } from "react-router-dom";
 
 import { NostrEvent, isATag } from "../../../types/nostr-event";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import UserAvatar from "../../user-avatar";
 import ChatMessageContent from "../../../views/streams/stream/stream-chat/chat-message-content";
 import useReplaceableEvent from "../../../hooks/use-replaceable-event";

src/components/embed-event/event-types/embedded-stream.tsx

@@ -4,7 +4,7 @@ import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { parseStreamEvent } from "../../../helpers/nostr/stream";
 import { NostrEvent } from "../../../types/nostr-event";
 import StreamStatusBadge from "../../../views/streams/components/status-badge";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import UserAvatar from "../../user-avatar";
 import useEventNaddr from "../../../hooks/use-event-naddr";
 import Timestamp from "../../timestamp";

src/components/embed-event/event-types/embedded-torrent-comment.tsx

@@ -3,7 +3,7 @@ import { Link as RouterLink } from "react-router-dom";
 
 import { NostrEvent } from "../../../types/nostr-event";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import useSubject from "../../../hooks/use-subject";
 import appSettings from "../../../services/settings/app-settings";
 import EventVerificationIcon from "../../event-verification-icon";

src/components/embed-event/event-types/embedded-torrent.tsx

@@ -18,7 +18,7 @@ import { Link as RouterLink } from "react-router-dom";
 
 import { getSharableEventAddress } from "../../../helpers/nip19";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import { NostrEvent } from "../../../types/nostr-event";
 import Timestamp from "../../timestamp";
 import Magnet from "../../icons/magnet";

src/components/embed-event/event-types/embedded-unknown.tsx

@@ -3,7 +3,7 @@ import { Box, Button, Card, CardBody, CardHeader, CardProps, Flex, Link, Text, u
 import { getSharableEventAddress } from "../../../helpers/nip19";
 import { NostrEvent } from "../../../types/nostr-event";
 import UserAvatarLink from "../../user-avatar-link";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import { truncatedId } from "../../../helpers/nostr/events";
 import { buildAppSelectUrl } from "../../../helpers/nostr/apps";
 import { UserDnsIdentityIcon } from "../../user-dns-identity-icon";

src/components/embed-types/nostr.tsx

@@ -3,7 +3,7 @@ import { Link as RouterLink } from "react-router-dom";
 
 import { EmbedableContent, embedJSX } from "../../helpers/embeds";
 import { DraftNostrEvent, NostrEvent } from "../../types/nostr-event";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import { getMatchHashtag, getMatchNostrLink, stripInvisibleChar } from "../../helpers/regexp";
 import { safeDecode } from "../../helpers/nip19";
 import { EmbedEventPointer } from "../embed-event";

src/components/event-interactions-modal/index.tsx

@@ -16,7 +16,7 @@ import {
 
 import { NostrEvent } from "../../types/nostr-event";
 import UserAvatarLink from "../user-avatar-link";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import { LightningIcon } from "../icons";
 import { ParsedZap } from "../../helpers/nostr/zaps";
 import { readablizeSats } from "../../helpers/bolt11";

src/components/event-interactions-modal/reaction-details.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { NostrEvent } from "../../types/nostr-event";
 import { groupReactions } from "../../helpers/nostr/reactions";
 import UserAvatarLink from "../user-avatar-link";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import ReactionIcon from "../event-reactions/reaction-icon";
 
 function ShowMoreGrid({

src/components/event-interactions-modal/repost-details.tsx

@@ -3,7 +3,7 @@ import { Kind } from "nostr-tools";
 
 import { NostrEvent } from "../../types/nostr-event";
 import UserAvatarLink from "../user-avatar-link";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import useTimelineLoader from "../../hooks/use-timeline-loader";
 import { useReadRelayUrls } from "../../hooks/use-client-relays";
 import useSubject from "../../hooks/use-subject";

src/components/event-zap-modal/index.tsx

@@ -28,7 +28,7 @@ import signingService from "../../services/signing";
 import accountService from "../../services/account";
 import PayStep from "./pay-step";
 import { getInvoiceFromCallbackUrl } from "../../helpers/lnurl";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import relayHintService from "../../services/event-relay-hint";
 
 export type PayRequest = { invoice?: string; pubkey: string; error?: any };

src/components/event-zap-modal/input-step.tsx

@@ -10,7 +10,7 @@ import { EmbedEvent, EmbedProps } from "../embed-event";
 import useAppSettings from "../../hooks/use-app-settings";
 import CustomZapAmountOptions from "./zap-options";
 import UserAvatar from "../user-avatar";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 
 function UserCard({ pubkey, percent }: { pubkey: string; percent?: number }) {
   const { address } = useUserLNURLMetadata(pubkey);

src/components/event-zap-modal/pay-step.tsx

@@ -3,7 +3,7 @@ import { Alert, Box, Button, ButtonGroup, Flex, IconButton, Spacer, useDisclosur
 
 import { PayRequest } from ".";
 import UserAvatar from "../user-avatar";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import { ChevronDownIcon, ChevronUpIcon, CheckIcon, ErrorIcon, LightningIcon } from "../icons";
 import { InvoiceModalContent } from "../invoice-modal";
 import { PropsWithChildren, useEffect, useState } from "react";

src/components/layout/ghost-toolbar.tsx

@@ -9,7 +9,7 @@ import useCurrentAccount from "../../hooks/use-current-account";
 import useSubject from "../../hooks/use-subject";
 import accountService from "../../services/account";
 import UserAvatar from "../user-avatar";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import { GhostIcon } from "../icons";
 import useTimelineLoader from "../../hooks/use-timeline-loader";
 import { useReadRelayUrls } from "../../hooks/use-client-relays";

src/components/lightbox-provider.tsx

@@ -31,7 +31,7 @@ declare module "yet-another-react-lightbox" {
 
 import { NostrEvent } from "../types/nostr-event";
 import UserAvatarLink from "./user-avatar-link";
-import { UserLink } from "./user-link";
+import UserLink from "./user-link";
 import { UserDnsIdentityIcon } from "./user-dns-identity-icon";
 import styled from "@emotion/styled";
 import { getSharableEventAddress } from "../helpers/nip19";

src/components/note-translation-modal/index.tsx

@@ -31,7 +31,7 @@ import { getEventUID } from "../../helpers/nostr/events";
 import { useReadRelayUrls } from "../../hooks/use-client-relays";
 import useSubject from "../../hooks/use-subject";
 import UserAvatarLink from "../user-avatar-link";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import { useSigningContext } from "../../providers/signing-provider";
 import relayScoreboardService from "../../services/relay-scoreboard";
 import NostrPublishAction from "../../classes/nostr-publish-action";

src/components/note/index.tsx

@@ -20,7 +20,7 @@ import { Link as RouterLink } from "react-router-dom";
 
 import NoteMenu from "./note-menu";
 import { EventRelays } from "./note-relays";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import { UserDnsIdentityIcon } from "../user-dns-identity-icon";
 import NoteZapButton from "./note-zap-button";
 import { ExpandProvider } from "../../providers/expanded";

src/components/post-modal/zap-split-creator.tsx

@@ -17,7 +17,7 @@ import { EventSplit } from "../../helpers/nostr/zaps";
 import { AddIcon } from "../icons";
 import { normalizeToHex } from "../../helpers/nip19";
 import UserAvatar from "../user-avatar";
-import { UserLink } from "../user-link";
+import UserLink from "../user-link";
 import NpubAutocomplete from "../npub-autocomplete";
 
 function getRemainingPercent(split: EventSplit) {

src/components/timeline-page/generic-note-timeline/relay-recommendation.tsx

@@ -3,7 +3,7 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { NostrEvent } from "../../../types/nostr-event";
 import UserAvatar from "../../user-avatar";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import RelayCard from "../../../views/relays/components/relay-card";
 import { safeRelayUrl } from "../../../helpers/url";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";

src/components/timeline-page/generic-note-timeline/repost-note.tsx

@@ -8,7 +8,7 @@ import { Note } from "../../note";
 import NoteMenu from "../../note/note-menu";
 import UserAvatar from "../../user-avatar";
 import { UserDnsIdentityIcon } from "../../user-dns-identity-icon";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import { TrustProvider } from "../../../providers/trust";
 import { useReadRelayUrls } from "../../../hooks/use-client-relays";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";

src/components/timeline-page/generic-note-timeline/stream-note.tsx

@@ -21,7 +21,7 @@ import { parseStreamEvent } from "../../../helpers/nostr/stream";
 import useEventNaddr from "../../../hooks/use-event-naddr";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
 import UserAvatar from "../../user-avatar";
-import { UserLink } from "../../user-link";
+import UserLink from "../../user-link";
 import StreamStatusBadge from "../../../views/streams/components/status-badge";
 import { EventRelays } from "../../note/note-relays";
 import { useAsync } from "react-use";

src/components/user-avatar.tsx

@@ -5,9 +5,9 @@ import { useAsync } from "react-use";
 
 import { getIdenticon } from "../helpers/identicon";
 import { safeUrl } from "../helpers/parse";
-import appSettings from "../services/settings/app-settings";
-import useSubject from "../hooks/use-subject";
 import { getUserDisplayName } from "../helpers/user-metadata";
+import useAppSettings from "../hooks/use-app-settings";
+import useCurrentAccount from "../hooks/use-current-account";
 
 export const UserIdenticon = memo(({ pubkey }: { pubkey: string }) => {
   const { value: identicon } = useAsync(() => getIdenticon(pubkey), [pubkey]);
@@ -21,9 +21,11 @@ export type UserAvatarProps = Omit<AvatarProps, "src"> & {
   noProxy?: boolean;
 };
 export const UserAvatar = forwardRef<HTMLDivElement, UserAvatarProps>(({ pubkey, noProxy, relay, ...props }, ref) => {
-  const { imageProxy, proxyUserMedia } = useSubject(appSettings);
+  const { imageProxy, proxyUserMedia, hideUsernames } = useAppSettings();
+  const account = useCurrentAccount();
   const metadata = useUserMetadata(pubkey, relay ? [relay] : undefined);
   const picture = useMemo(() => {
+    if (hideUsernames && pubkey !== account?.pubkey) return undefined;
     if (metadata?.picture) {
       const src = safeUrl(metadata?.picture);
       if (!noProxy) {
@@ -36,7 +38,7 @@ export const UserAvatar = forwardRef<HTMLDivElement, UserAvatarProps>(({ pubkey,
       }
       return src;
     }
-  }, [metadata?.picture, imageProxy]);
+  }, [metadata?.picture, imageProxy, hideUsernames, account]);
 
   return (
     <Avatar

src/components/user-link.tsx

@@ -4,20 +4,24 @@ import { nip19 } from "nostr-tools";
 
 import { getUserDisplayName } from "../helpers/user-metadata";
 import { useUserMetadata } from "../hooks/use-user-metadata";
+import useAppSettings from "../hooks/use-app-settings";
+import useCurrentAccount from "../hooks/use-current-account";
 
 export type UserLinkProps = LinkProps & {
   pubkey: string;
   showAt?: boolean;
   tab?: string;
 };
 
-export const UserLink = ({ pubkey, showAt, tab, ...props }: UserLinkProps) => {
+export default function UserLink({ pubkey, showAt, tab, ...props }: UserLinkProps) {
   const metadata = useUserMetadata(pubkey);
+  const account = useCurrentAccount();
+  const { hideUsernames } = useAppSettings();
 
   return (
     <Link as={RouterLink} to={`/u/${nip19.npubEncode(pubkey)}` + (tab ? "/" + tab : "")} whiteSpace="nowrap" {...props}>
       {showAt && "@"}
-      {getUserDisplayName(metadata, pubkey)}
+      {hideUsernames && pubkey !== account?.pubkey ? "Anon" : getUserDisplayName(metadata, pubkey)}
     </Link>
   );
-};
+}

src/components/user-name.tsx

@@ -2,13 +2,15 @@ import { Text, TextProps } from "@chakra-ui/react";
 
 import { getUserDisplayName } from "../helpers/user-metadata";
 import { useUserMetadata } from "../hooks/use-user-metadata";
+import useAppSettings from "../hooks/use-app-settings";
 
 export default function UserName({ pubkey, ...props }: Omit<TextProps, "children"> & { pubkey: string }) {
   const metadata = useUserMetadata(pubkey);
+  const { hideUsernames } = useAppSettings();
 
   return (
     <Text as="span" whiteSpace="nowrap" fontWeight="bold" {...props}>
-      {getUserDisplayName(metadata, pubkey)}
+      {hideUsernames ? "Anon" : getUserDisplayName(metadata, pubkey)}
     </Text>
   );
 }

src/providers/dycryption-provider.tsx

@@ -37,8 +37,8 @@ const DecryptionContext = createContext<DecryptionContextType>({
   getQueue: () => [],
 });
 
-export function useDecryptionContext(){
-	return useContext(DecryptionContext)
+export function useDecryptionContext() {
+  return useContext(DecryptionContext);
 }
 export function useDecryptionContainer(pubkey: string, data: string) {
   const { getOrCreateContainer, addToQueue, startQueue } = useContext(DecryptionContext);

src/providers/mute-modal-provider.tsx

@@ -39,7 +39,7 @@ import replaceableEventLoaderService from "../services/replaceable-event-request
 import useUserMuteList from "../hooks/use-user-mute-list";
 import { DraftNostrEvent } from "../types/nostr-event";
 import UserAvatar from "../components/user-avatar";
-import { UserLink } from "../components/user-link";
+import UserLink from "../components/user-link";
 import { ChevronDownIcon } from "../components/icons";
 
 type MuteModalContextType = {

src/services/account.ts

@@ -8,7 +8,7 @@ export type Account = {
   relays?: string[];
   secKey?: ArrayBuffer;
   iv?: Uint8Array;
-  connectionType?: 'extension'|'serial';
+  connectionType?: "extension" | "serial";
   localSettings?: AppSettings;
 };