2023-01-06 14:36:13 +00:00
|
|
|
import "./ProfileImage.css";
|
2023-01-06 11:04:25 +00:00
|
|
|
|
2023-01-06 14:36:13 +00:00
|
|
|
import { useMemo } from "react";
|
2023-01-27 21:38:41 +00:00
|
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
|
|
import { useUserProfile } from "Feed/ProfileFeed";
|
2023-01-20 11:11:50 +00:00
|
|
|
import { hexToBech32, profileLink } from "Util";
|
2023-02-07 20:04:50 +00:00
|
|
|
import Avatar from "Element/Avatar";
|
2023-01-20 11:11:50 +00:00
|
|
|
import Nip05 from "Element/Nip05";
|
2023-02-11 20:05:46 +00:00
|
|
|
import { HexKey } from "@snort/nostr";
|
2023-01-27 21:38:41 +00:00
|
|
|
import { MetadataCache } from "State/Users";
|
2023-02-12 21:26:43 +00:00
|
|
|
import usePageWidth from "Hooks/usePageWidth";
|
2022-12-27 23:46:13 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export interface ProfileImageProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
pubkey: HexKey;
|
|
|
|
subHeader?: JSX.Element;
|
|
|
|
showUsername?: boolean;
|
|
|
|
className?: string;
|
|
|
|
link?: string;
|
2023-02-12 21:40:02 +00:00
|
|
|
autoWidth?: boolean;
|
2023-02-09 22:22:16 +00:00
|
|
|
defaultNip?: string;
|
|
|
|
verifyNip?: boolean;
|
2023-02-12 20:44:59 +00:00
|
|
|
linkToProfile?: boolean;
|
2023-02-18 21:27:06 +00:00
|
|
|
overrideUsername?: string;
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
2022-12-27 23:46:13 +00:00
|
|
|
|
2023-02-09 22:22:16 +00:00
|
|
|
export default function ProfileImage({
|
|
|
|
pubkey,
|
|
|
|
subHeader,
|
|
|
|
showUsername = true,
|
|
|
|
className,
|
|
|
|
link,
|
2023-02-12 21:40:02 +00:00
|
|
|
autoWidth = true,
|
2023-02-09 22:22:16 +00:00
|
|
|
defaultNip,
|
|
|
|
verifyNip,
|
2023-02-12 20:44:59 +00:00
|
|
|
linkToProfile = true,
|
2023-02-18 21:27:06 +00:00
|
|
|
overrideUsername,
|
2023-02-09 22:22:16 +00:00
|
|
|
}: ProfileImageProps) {
|
2023-02-07 20:04:50 +00:00
|
|
|
const navigate = useNavigate();
|
|
|
|
const user = useUserProfile(pubkey);
|
2023-02-10 10:16:17 +00:00
|
|
|
const nip05 = defaultNip ? defaultNip : user?.nip05;
|
2023-02-12 21:28:41 +00:00
|
|
|
const width = usePageWidth();
|
2023-01-16 22:22:21 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
const name = useMemo(() => {
|
2023-02-18 21:27:06 +00:00
|
|
|
return overrideUsername ?? getDisplayName(user, pubkey);
|
|
|
|
}, [user, pubkey, overrideUsername]);
|
2023-01-10 10:30:33 +00:00
|
|
|
|
2023-02-10 13:14:40 +00:00
|
|
|
if (!pubkey && !link) {
|
|
|
|
link = "#";
|
|
|
|
}
|
|
|
|
|
2023-02-12 20:44:59 +00:00
|
|
|
const onAvatarClick = () => {
|
|
|
|
if (linkToProfile) {
|
|
|
|
navigate(link ?? profileLink(pubkey));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
2023-02-14 20:58:47 +00:00
|
|
|
<div className={`pfp f-ellipsis${className ? ` ${className}` : ""}`}>
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="avatar-wrapper">
|
2023-02-12 20:44:59 +00:00
|
|
|
<Avatar user={user} onClick={onAvatarClick} />
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
{showUsername && (
|
2023-02-12 12:31:48 +00:00
|
|
|
<div className="profile-name">
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="username">
|
2023-02-09 12:26:54 +00:00
|
|
|
<Link className="display-name" key={pubkey} to={link ?? profileLink(pubkey)}>
|
2023-02-28 15:45:28 +00:00
|
|
|
<div>{name.trim()}</div>
|
2023-02-09 22:22:16 +00:00
|
|
|
{nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
|
2023-02-07 20:04:50 +00:00
|
|
|
</Link>
|
|
|
|
</div>
|
2023-02-12 21:40:02 +00:00
|
|
|
<div className="subheader" style={{ width: autoWidth ? width - 190 : "" }}>
|
2023-02-12 12:31:48 +00:00
|
|
|
{subHeader}
|
|
|
|
</div>
|
2022-12-27 23:46:13 +00:00
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
2023-01-15 12:02:45 +00:00
|
|
|
}
|
2023-01-19 12:59:37 +00:00
|
|
|
|
2023-02-09 12:26:54 +00:00
|
|
|
export function getDisplayName(user: MetadataCache | undefined, pubkey: HexKey) {
|
2023-02-07 20:04:50 +00:00
|
|
|
let name = hexToBech32("npub", pubkey).substring(0, 12);
|
2023-02-07 19:47:57 +00:00
|
|
|
if (user?.display_name !== undefined && user.display_name.length > 0) {
|
|
|
|
name = user.display_name;
|
|
|
|
} else if (user?.name !== undefined && user.name.length > 0) {
|
|
|
|
name = user.name;
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
|
|
|
return name;
|
2023-01-19 12:59:37 +00:00
|
|
|
}
|