optional animal name placeholders for profile names
This commit is contained in:
parent
0b5dc2d290
commit
ef7fc458f6
@ -5,5 +5,6 @@
|
|||||||
"nip05Domain": "iris.to",
|
"nip05Domain": "iris.to",
|
||||||
"favicon": "public/iris/favicon.ico",
|
"favicon": "public/iris/favicon.ico",
|
||||||
"appleTouchIconUrl": "/img/apple-touch-icon.png",
|
"appleTouchIconUrl": "/img/apple-touch-icon.png",
|
||||||
"httpCache": "https://api.iris.to"
|
"httpCache": "https://api.iris.to",
|
||||||
|
"animalNamePlaceholders": true
|
||||||
}
|
}
|
||||||
|
1835
packages/app/src/Element/User/AnimalName.ts
Normal file
1835
packages/app/src/Element/User/AnimalName.ts
Normal file
File diff suppressed because it is too large
Load Diff
@ -32,3 +32,7 @@ a.pfp {
|
|||||||
.pfp a {
|
.pfp a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: var(--gray-medium);
|
||||||
|
}
|
||||||
|
@ -10,6 +10,7 @@ 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";
|
||||||
|
|
||||||
export interface ProfileImageProps {
|
export interface ProfileImageProps {
|
||||||
pubkey: HexKey;
|
pubkey: HexKey;
|
||||||
@ -49,8 +50,8 @@ export default function ProfileImage({
|
|||||||
const { follows } = useLogin();
|
const { follows } = useLogin();
|
||||||
const doesFollow = follows.item.includes(pubkey);
|
const doesFollow = follows.item.includes(pubkey);
|
||||||
|
|
||||||
const name = useMemo(() => {
|
const [name, isPlaceHolder] = useMemo(() => {
|
||||||
return overrideUsername ?? getDisplayName(user, pubkey);
|
return overrideUsername ? [overrideUsername, false] : getDisplayNameOrPlaceHolder(user, pubkey);
|
||||||
}, [user, pubkey, overrideUsername]);
|
}, [user, pubkey, overrideUsername]);
|
||||||
|
|
||||||
function handleClick(e: React.MouseEvent) {
|
function handleClick(e: React.MouseEvent) {
|
||||||
@ -86,7 +87,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>{name.trim()}</div>
|
<div className={isPlaceHolder ? "placeholder" : ""}>{name.trim()}</div>
|
||||||
{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,7 +115,21 @@ export default function ProfileImage({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getDisplayName(user: UserMetadata | undefined, pubkey: HexKey) {
|
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);
|
let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
|
||||||
if (typeof user?.display_name === "string" && user.display_name.length > 0) {
|
if (typeof user?.display_name === "string" && user.display_name.length > 0) {
|
||||||
name = user.display_name;
|
name = user.display_name;
|
||||||
|
@ -91,6 +91,7 @@ const config = {
|
|||||||
"process.env.APP_NAME_CAPITALIZED": JSON.stringify(appConfig.get("appNameCapitalized")),
|
"process.env.APP_NAME_CAPITALIZED": JSON.stringify(appConfig.get("appNameCapitalized")),
|
||||||
"process.env.NIP05_DOMAIN": JSON.stringify(appConfig.get("nip05Domain")),
|
"process.env.NIP05_DOMAIN": JSON.stringify(appConfig.get("nip05Domain")),
|
||||||
"process.env.HTTP_CACHE": JSON.stringify(appConfig.get("httpCache")),
|
"process.env.HTTP_CACHE": JSON.stringify(appConfig.get("httpCache")),
|
||||||
|
"process.env.ANIMAL_NAME_PLACEHOLDERS": JSON.stringify(appConfig.get("animalNamePlaceholders")),
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
module: {
|
module: {
|
||||||
|
Loading…
Reference in New Issue
Block a user