animal name placeholder in all getDisplayName calls
Some checks reported errors
continuous-integration/drone/pr Build encountered an error
Some checks reported errors
continuous-integration/drone/pr Build encountered an error
This commit is contained in:
parent
ef7fc458f6
commit
40e05480e6
@ -1,21 +1,16 @@
|
|||||||
import { useMemo } from "react";
|
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { HexKey } from "@snort/system";
|
import { HexKey } from "@snort/system";
|
||||||
|
|
||||||
import { useUserProfile } from "@snort/system-react";
|
import { useUserProfile } from "@snort/system-react";
|
||||||
import { profileLink } from "SnortUtils";
|
import { profileLink } from "SnortUtils";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import DisplayName from "../User/DisplayName";
|
||||||
|
|
||||||
export default function Mention({ pubkey, relays }: { pubkey: HexKey; relays?: Array<string> | string }) {
|
export default function Mention({ pubkey, relays }: { pubkey: HexKey; relays?: Array<string> | string }) {
|
||||||
const user = useUserProfile(pubkey);
|
const user = useUserProfile(pubkey);
|
||||||
|
|
||||||
const name = useMemo(() => {
|
|
||||||
return getDisplayName(user, pubkey);
|
|
||||||
}, [user, pubkey]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={profileLink(pubkey, relays)} onClick={e => e.stopPropagation()}>
|
<Link to={profileLink(pubkey, relays)} onClick={e => e.stopPropagation()}>
|
||||||
@{name}
|
@<DisplayName user={user} pubkey={pubkey} />
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,7 @@ import FollowListBase from "Element/User/FollowListBase";
|
|||||||
import AsyncButton from "Element/AsyncButton";
|
import AsyncButton from "Element/AsyncButton";
|
||||||
import { useWallet } from "Wallet";
|
import { useWallet } from "Wallet";
|
||||||
import { Toastore } from "Toaster";
|
import { Toastore } from "Toaster";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { UserCache } from "Cache";
|
import { UserCache } from "Cache";
|
||||||
import useLogin from "Hooks/useLogin";
|
import useLogin from "Hooks/useLogin";
|
||||||
import useEventPublisher from "Hooks/useEventPublisher";
|
import useEventPublisher from "Hooks/useEventPublisher";
|
||||||
|
@ -18,7 +18,7 @@ import { useInteractionCache } from "Hooks/useInteractionCache";
|
|||||||
import { ZapPoolController } from "ZapPoolController";
|
import { ZapPoolController } from "ZapPoolController";
|
||||||
import { System } from "index";
|
import { System } from "index";
|
||||||
import { Zapper, ZapTarget } from "Zapper";
|
import { Zapper, ZapTarget } from "Zapper";
|
||||||
import { getDisplayName } from "../User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { useNoteCreator } from "State/NoteCreator";
|
import { useNoteCreator } from "State/NoteCreator";
|
||||||
|
|
||||||
import messages from "../messages";
|
import messages from "../messages";
|
||||||
|
@ -4,7 +4,7 @@ import { useMemo } from "react";
|
|||||||
import { EventKind, NostrEvent, TaggedNostrEvent, NostrPrefix, EventExt } from "@snort/system";
|
import { EventKind, NostrEvent, TaggedNostrEvent, NostrPrefix, EventExt } from "@snort/system";
|
||||||
|
|
||||||
import Note from "Element/Event/Note";
|
import Note from "Element/Event/Note";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { eventLink, hexToBech32 } from "SnortUtils";
|
import { eventLink, hexToBech32 } from "SnortUtils";
|
||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
import FormattedMessage from "Element/FormattedMessage";
|
import FormattedMessage from "Element/FormattedMessage";
|
||||||
|
@ -4,7 +4,7 @@ import { CSSProperties, ReactNode, useEffect, useState } from "react";
|
|||||||
import type { UserMetadata } from "@snort/system";
|
import type { UserMetadata } from "@snort/system";
|
||||||
|
|
||||||
import useImgProxy from "Hooks/useImgProxy";
|
import useImgProxy from "Hooks/useImgProxy";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { defaultAvatar } from "SnortUtils";
|
import { defaultAvatar } from "SnortUtils";
|
||||||
|
|
||||||
interface AvatarProps {
|
interface AvatarProps {
|
||||||
|
3
packages/app/src/Element/User/DisplayName.css
Normal file
3
packages/app/src/Element/User/DisplayName.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.placeholder {
|
||||||
|
color: var(--gray-light);
|
||||||
|
}
|
39
packages/app/src/Element/User/DisplayName.tsx
Normal file
39
packages/app/src/Element/User/DisplayName.tsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import "./DisplayName.css";
|
||||||
|
|
||||||
|
import React, { useMemo } from "react";
|
||||||
|
import { HexKey, UserMetadata, NostrPrefix } from "@snort/system";
|
||||||
|
import AnimalName from "Element/User/AnimalName";
|
||||||
|
import { hexToBech32 } from "SnortUtils";
|
||||||
|
|
||||||
|
interface DisplayNameProps {
|
||||||
|
pubkey: HexKey;
|
||||||
|
user: UserMetadata | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDisplayName(user: UserMetadata | undefined, pubkey: HexKey): string {
|
||||||
|
return getDisplayNameOrPlaceHolder(user, pubkey)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDisplayNameOrPlaceHolder(user: UserMetadata | undefined, pubkey: HexKey): [string, boolean] {
|
||||||
|
let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
|
||||||
|
let isPlaceHolder = false;
|
||||||
|
|
||||||
|
if (user?.display_name) {
|
||||||
|
name = user.display_name;
|
||||||
|
} else if (user?.name) {
|
||||||
|
name = user.name;
|
||||||
|
} else if (pubkey && process.env.ANIMAL_NAME_PLACEHOLDERS) {
|
||||||
|
name = AnimalName(pubkey);
|
||||||
|
isPlaceHolder = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [name.trim(), isPlaceHolder];
|
||||||
|
}
|
||||||
|
|
||||||
|
const DisplayName = ({ pubkey, user }: DisplayNameProps) => {
|
||||||
|
const [name, isPlaceHolder] = useMemo(() => getDisplayNameOrPlaceHolder(user, pubkey), [user, pubkey]);
|
||||||
|
|
||||||
|
return <span className={isPlaceHolder ? "placeholder" : ""}>{name}</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DisplayName;
|
@ -32,7 +32,3 @@ a.pfp {
|
|||||||
.pfp a {
|
.pfp a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder {
|
|
||||||
color: var(--gray-medium);
|
|
||||||
}
|
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
import "./ProfileImage.css";
|
import "./ProfileImage.css";
|
||||||
|
|
||||||
import React, { ReactNode, useMemo } from "react";
|
import React, { ReactNode } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { HexKey, NostrPrefix, UserMetadata } from "@snort/system";
|
import { HexKey, UserMetadata } from "@snort/system";
|
||||||
import { useUserProfile } from "@snort/system-react";
|
import { useUserProfile } from "@snort/system-react";
|
||||||
|
|
||||||
import { hexToBech32, profileLink } from "SnortUtils";
|
import { profileLink } from "SnortUtils";
|
||||||
import Avatar from "Element/User/Avatar";
|
import Avatar from "Element/User/Avatar";
|
||||||
import Nip05 from "Element/User/Nip05";
|
import Nip05 from "Element/User/Nip05";
|
||||||
import useLogin from "Hooks/useLogin";
|
import useLogin from "Hooks/useLogin";
|
||||||
import Icon from "Icons/Icon";
|
import Icon from "Icons/Icon";
|
||||||
import AnimalName from "./AnimalName";
|
import DisplayName from "./DisplayName";
|
||||||
|
|
||||||
export interface ProfileImageProps {
|
export interface ProfileImageProps {
|
||||||
pubkey: HexKey;
|
pubkey: HexKey;
|
||||||
@ -50,10 +50,6 @@ export default function ProfileImage({
|
|||||||
const { follows } = useLogin();
|
const { follows } = useLogin();
|
||||||
const doesFollow = follows.item.includes(pubkey);
|
const doesFollow = follows.item.includes(pubkey);
|
||||||
|
|
||||||
const [name, isPlaceHolder] = useMemo(() => {
|
|
||||||
return overrideUsername ? [overrideUsername, false] : getDisplayNameOrPlaceHolder(user, pubkey);
|
|
||||||
}, [user, pubkey, overrideUsername]);
|
|
||||||
|
|
||||||
function handleClick(e: React.MouseEvent) {
|
function handleClick(e: React.MouseEvent) {
|
||||||
if (link === "") {
|
if (link === "") {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -87,7 +83,7 @@ export default function ProfileImage({
|
|||||||
{showUsername && (
|
{showUsername && (
|
||||||
<div className="f-ellipsis">
|
<div className="f-ellipsis">
|
||||||
<div className="flex g4 username">
|
<div className="flex g4 username">
|
||||||
<div className={isPlaceHolder ? "placeholder" : ""}>{name.trim()}</div>
|
{overrideUsername ? overrideUsername : <DisplayName pubkey={pubkey} user={user} />}
|
||||||
{nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
|
{nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="subheader">{subHeader}</div>
|
<div className="subheader">{subHeader}</div>
|
||||||
@ -114,27 +110,3 @@ export default function ProfileImage({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getDisplayNameOrPlaceHolder(user: UserMetadata | undefined, pubkey: HexKey): [string, boolean] {
|
|
||||||
let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
|
|
||||||
let isPlaceHolder = false;
|
|
||||||
if (typeof user?.display_name === "string" && user.display_name.length > 0) {
|
|
||||||
name = user.display_name;
|
|
||||||
} else if (typeof user?.name === "string" && user.name.length > 0) {
|
|
||||||
name = user.name;
|
|
||||||
} else if (pubkey && process.env.ANIMAL_NAME_PLACEHOLDERS) {
|
|
||||||
name = AnimalName(pubkey);
|
|
||||||
isPlaceHolder = true;
|
|
||||||
}
|
|
||||||
return [name, isPlaceHolder];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getDisplayName(user: UserMetadata | undefined, pubkey: HexKey): string {
|
|
||||||
let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
|
|
||||||
if (typeof user?.display_name === "string" && user.display_name.length > 0) {
|
|
||||||
name = user.display_name;
|
|
||||||
} else if (typeof user?.name === "string" && user.name.length > 0) {
|
|
||||||
name = user.name;
|
|
||||||
}
|
|
||||||
return name;
|
|
||||||
}
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { TaggedNostrEvent, EventKind, MetadataCache } from "@snort/system";
|
import { TaggedNostrEvent, EventKind, MetadataCache } from "@snort/system";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { MentionRegex } from "Const";
|
import { MentionRegex } from "Const";
|
||||||
import { defaultAvatar, tagFilterOfTextRepost, unwrap } from "SnortUtils";
|
import { defaultAvatar, tagFilterOfTextRepost, unwrap } from "SnortUtils";
|
||||||
import { UserCache } from "Cache";
|
import { UserCache } from "Cache";
|
||||||
|
@ -7,7 +7,7 @@ import { NostrLink, NostrPrefix, TLVEntryType, UserMetadata, decodeTLV } from "@
|
|||||||
import { useUserProfile, useUserSearch } from "@snort/system-react";
|
import { useUserProfile, useUserSearch } from "@snort/system-react";
|
||||||
|
|
||||||
import UnreadCount from "Element/UnreadCount";
|
import UnreadCount from "Element/UnreadCount";
|
||||||
import ProfileImage, { getDisplayName } from "Element/User/ProfileImage";
|
import ProfileImage from "Element/User/ProfileImage";
|
||||||
import { appendDedupe, debounce, parseId } from "SnortUtils";
|
import { appendDedupe, debounce, parseId } from "SnortUtils";
|
||||||
import NoteToSelf from "Element/User/NoteToSelf";
|
import NoteToSelf from "Element/User/NoteToSelf";
|
||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
@ -25,6 +25,7 @@ import { useEventFeed } from "Feed/EventFeed";
|
|||||||
import { LoginSession, LoginStore } from "Login";
|
import { LoginSession, LoginStore } from "Login";
|
||||||
import { Nip28ChatSystem } from "chat/nip28";
|
import { Nip28ChatSystem } from "chat/nip28";
|
||||||
import { ChatParticipantProfile } from "Element/Chat/ChatParticipant";
|
import { ChatParticipantProfile } from "Element/Chat/ChatParticipant";
|
||||||
|
import { getDisplayName } from "../Element/User/DisplayName";
|
||||||
|
|
||||||
const TwoCol = 768;
|
const TwoCol = 768;
|
||||||
const ThreeCol = 1500;
|
const ThreeCol = 1500;
|
||||||
|
@ -12,13 +12,14 @@ import { markNotificationsRead } from "Login";
|
|||||||
import { Notifications, UserCache } from "Cache";
|
import { Notifications, UserCache } from "Cache";
|
||||||
import { dedupe, findTag, orderDescending } from "SnortUtils";
|
import { dedupe, findTag, orderDescending } from "SnortUtils";
|
||||||
import Icon from "Icons/Icon";
|
import Icon from "Icons/Icon";
|
||||||
import ProfileImage, { getDisplayName } from "Element/User/ProfileImage";
|
import ProfileImage from "Element/User/ProfileImage";
|
||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
import { useEventFeed } from "Feed/EventFeed";
|
import { useEventFeed } from "Feed/EventFeed";
|
||||||
import Text from "Element/Text";
|
import Text from "Element/Text";
|
||||||
import { formatShort } from "Number";
|
import { formatShort } from "Number";
|
||||||
import { LiveEvent } from "Element/LiveEvent";
|
import { LiveEvent } from "Element/LiveEvent";
|
||||||
import ProfilePreview from "Element/User/ProfilePreview";
|
import ProfilePreview from "Element/User/ProfilePreview";
|
||||||
|
import { getDisplayName } from "../Element/User/DisplayName";
|
||||||
|
|
||||||
function notificationContext(ev: TaggedNostrEvent) {
|
function notificationContext(ev: TaggedNostrEvent) {
|
||||||
switch (ev.kind) {
|
switch (ev.kind) {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { UserCache } from "Cache";
|
import { UserCache } from "Cache";
|
||||||
import { getDisplayName } from "Element/User/ProfileImage";
|
import { getDisplayName } from "Element/User/DisplayName";
|
||||||
import { LNURL, ExternalStore, unixNow } from "@snort/shared";
|
import { LNURL, ExternalStore, unixNow } from "@snort/shared";
|
||||||
import { Toastore } from "Toaster";
|
import { Toastore } from "Toaster";
|
||||||
import { LNWallet, WalletInvoiceState, Wallets } from "Wallet";
|
import { LNWallet, WalletInvoiceState, Wallets } from "Wallet";
|
||||||
|
Loading…
Reference in New Issue
Block a user