diff --git a/src/element/Nip05.js b/src/element/Nip05.js index 11691615..2267f015 100644 --- a/src/element/Nip05.js +++ b/src/element/Nip05.js @@ -36,16 +36,20 @@ export function useIsVerified(nip05, pubkey) { ) const isVerified = isSuccess && data === pubkey const cantVerify = isSuccess && data !== pubkey - return { name, domain: domain?.toLowerCase(), isVerified, couldNotVerify: isError || cantVerify } + return { isVerified, couldNotVerify: isError || cantVerify } } -const Nip05 = ({ name, domain, isVerified, couldNotVerify }) => { +const Nip05 = ({ nip05, pubkey, defaultUsername = '' }) => { + const [name, domain] = nip05 ? nip05.split('@') : [] const isDefaultUser = name === '_' + const { isVerified, couldNotVerify } = useIsVerified(nip05, pubkey) return (
ev.stopPropagation()}> - {!isDefaultUser &&
{name}
} -
+
+ {isDefaultUser ? defaultUsername : name} +
+
{domain}
diff --git a/src/element/Note.js b/src/element/Note.js index 7745ae2e..6a5c27e3 100644 --- a/src/element/Note.js +++ b/src/element/Note.js @@ -9,6 +9,7 @@ import Text from "./Text"; import { eventLink, hexToBech32 } from "../Util"; import NoteFooter from "./NoteFooter"; import NoteTime from "./NoteTime"; +import Nip05 from "./Nip05"; export default function Note(props) { const navigate = useNavigate(); diff --git a/src/element/ProfileImage.css b/src/element/ProfileImage.css index f75504f4..f527152d 100644 --- a/src/element/ProfileImage.css +++ b/src/element/ProfileImage.css @@ -18,3 +18,13 @@ .pfp a:hover { text-decoration: underline; } + +.pfp .nip05 { + font-size: 14px; + margin: 0; +} + +.pfp .profile-name { + display: flex; + flex-direction: row; +} diff --git a/src/element/ProfileImage.js b/src/element/ProfileImage.js index 828c583c..b86f796c 100644 --- a/src/element/ProfileImage.js +++ b/src/element/ProfileImage.js @@ -6,6 +6,7 @@ import { Link, useNavigate } from "react-router-dom"; import useProfile from "../feed/ProfileFeed"; import { hexToBech32, profileLink } from "../Util"; import LazyImage from "./LazyImage"; +import Nip05 from "./Nip05"; export default function ProfileImage({ pubkey, subHeader, showUsername = true, className, link }) { const navigate = useNavigate(); @@ -26,10 +27,20 @@ export default function ProfileImage({ pubkey, subHeader, showUsername = true, c
navigate(link ?? profileLink(pubkey))} /> {showUsername && (
- {name} +
+ + {user?.nip05 ? ( + + ): name} + +
{subHeader ? <>{subHeader} : null}
)}
) -} \ No newline at end of file +} diff --git a/src/element/Textarea.tsx b/src/element/Textarea.tsx index 94738a9d..35a75d1a 100644 --- a/src/element/Textarea.tsx +++ b/src/element/Textarea.tsx @@ -4,7 +4,7 @@ import { useLiveQuery } from "dexie-react-hooks"; import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete"; // @ts-expect-error -import Nip05, { useIsVerified } from "./Nip05"; +import Nip05 from "./Nip05"; import "@webscopeio/react-textarea-autocomplete/style.css"; import "./Textarea.css"; // @ts-expect-error @@ -25,7 +25,6 @@ function searchUsers(query: string, users: User[]) { } const UserItem = ({ pubkey, display_name, picture, nip05, ...rest }: User) => { - const { isVerified, couldNotVerify, name, domain } = useIsVerified(nip05, pubkey) return (
@@ -33,7 +32,7 @@ const UserItem = ({ pubkey, display_name, picture, nip05, ...rest }: User) => {
{display_name || rest.name} - +
) diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 3e801bf5..a1ca626b 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -13,7 +13,7 @@ import { extractLnAddress, parseId, hexToBech32 } from "../Util"; import Timeline from "../element/Timeline"; import Text from '../element/Text' import LNURLTip from "../element/LNURLTip"; -import Nip05, { useIsVerified } from "../element/Nip05"; +import Nip05 from "../element/Nip05"; import Copy from "../element/Copy"; import ProfilePreview from "../element/ProfilePreview"; import FollowersList from "../element/FollowersList"; @@ -37,9 +37,9 @@ export default function ProfilePage() { const [showLnQr, setShowLnQr] = useState(false); const [tab, setTab] = useState(ProfileTab.Notes); const about = Text({ content: user?.about }) - const { name, domain, isVerified, couldNotVerify } = useIsVerified(user?.nip05, user?.pubkey) const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture const backgroundImage = `url(${avatarUrl})` + const domain = user?.nip05 && user.nip05.split('@')[1] useEffect(() => { setTab(ProfileTab.Notes); @@ -50,7 +50,7 @@ export default function ProfilePage() {

{user?.display_name || user?.name || 'Nostrich'}

- {user?.nip05 && } + {user?.nip05 && }
) } @@ -103,7 +103,7 @@ export default function ProfilePage() { function avatar() { return (
-
+
)