Files
lume/packages/ui/src/user/nip05.tsx
2024-04-03 07:29:46 +07:00

36 lines
1.2 KiB
TypeScript

import { VerifiedIcon } from "@lume/icons";
import { cn, displayLongHandle, displayNpub } from "@lume/utils";
import { useQuery } from "@tanstack/react-query";
import { useUserContext } from "./provider";
import { useRouteContext } from "@tanstack/react-router";
export function UserNip05({ className }: { className?: string }) {
const user = useUserContext();
const { ark } = useRouteContext({ strict: false });
const { isLoading, data: verified } = useQuery({
queryKey: ["nip05", user?.pubkey],
queryFn: async () => {
if (!user.profile?.nip05) return false;
const verify = await ark.verify_nip05(user.pubkey, user.profile?.nip05);
return verify;
},
enabled: !!user.profile,
});
return (
<div className="inline-flex items-center gap-1">
<p className={cn("text-sm", className)}>
{!user.profile?.nip05
? displayNpub(user.pubkey, 16)
: user.profile?.nip05.length > 50
? displayLongHandle(user.profile?.nip05)
: user.profile.nip05?.replace("_@", "")}
</p>
{!isLoading && verified ? (
<VerifiedIcon className="size-4 text-teal-500" />
) : null}
</div>
);
}