Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add Usernames component to Choose for enhanced ENS username selection

yoginth.com 6e208e55 ed385e57

verified
+37
+2
apps/web/src/components/ENS/Choose.tsx
··· 32 32 useZodForm 33 33 } from "../Shared/UI"; 34 34 import { useENSCreateStore } from "."; 35 + import Usernames from "./Usernames"; 35 36 36 37 const ValidationSchema = z.object({ 37 38 username: z ··· 235 236 </Card> 236 237 ) : null} 237 238 </Form> 239 + <Usernames /> 238 240 </Card> 239 241 ); 240 242 };
+35
apps/web/src/components/ENS/Usernames.tsx
··· 1 + import { HEY_ENS_NAMESPACE } from "@hey/data/constants"; 2 + import { useUsernamesQuery } from "@hey/indexer"; 3 + import { Card, Image } from "@/components/Shared/UI"; 4 + 5 + const Usernames = () => { 6 + const { data } = useUsernamesQuery({ 7 + variables: { request: { filter: { namespace: HEY_ENS_NAMESPACE } } } 8 + }); 9 + 10 + const usernames = data?.usernames?.items; 11 + 12 + if (usernames?.length === 0) { 13 + return null; 14 + } 15 + 16 + return ( 17 + <Card className="mt-5 space-y-2 p-5"> 18 + {usernames?.map((username) => ( 19 + <div key={username.localName}> 20 + <div className="flex items-center gap-x-2"> 21 + <Image 22 + className="size-4" 23 + src="https://ens.domains/assets/brand/mark/ens-mark-Blue.svg" 24 + /> 25 + <div> 26 + <b>{username.localName}</b>.hey.xyz 27 + </div> 28 + </div> 29 + </div> 30 + ))} 31 + </Card> 32 + ); 33 + }; 34 + 35 + export default Usernames;