Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
feat: enhance Usernames component to filter usernames by current account address and handle loading state
1import { HEY_ENS_NAMESPACE } from "@hey/data/constants";
2import { useUsernamesQuery } from "@hey/indexer";
3import { Card, Image } from "@/components/Shared/UI";
4import { useAccountStore } from "@/store/persisted/useAccountStore";
5
6const Usernames = () => {
7 const { currentAccount } = useAccountStore();
8
9 const { data, loading } = useUsernamesQuery({
10 variables: {
11 request: {
12 filter: { namespace: HEY_ENS_NAMESPACE, owner: currentAccount?.address }
13 }
14 }
15 });
16
17 const usernames = data?.usernames?.items;
18
19 if (loading || usernames?.length === 0) {
20 return null;
21 }
22
23 return (
24 <Card className="mt-5 space-y-2 p-5">
25 {usernames?.map((username) => (
26 <div key={username.localName}>
27 <div className="flex items-center gap-x-2">
28 <Image
29 className="size-4"
30 src="https://ens.domains/assets/brand/mark/ens-mark-Blue.svg"
31 />
32 <div>
33 <b>{username.localName}</b>.hey.xyz
34 </div>
35 </div>
36 </div>
37 ))}
38 </Card>
39 );
40};
41
42export default Usernames;