Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
refactor: replace Mint component with Choose, Minting, and Success components for enhanced ENS username creation flow
1import { HEY_ENS_NAMESPACE } from "@hey/data/constants";
2import { useUsernameQuery } from "@hey/indexer";
3import { Card, H4, Spinner } from "@/components/Shared/UI";
4import { useENSCreateStore } from ".";
5
6const Minting = () => {
7 const { setScreen, transactionHash, chosenUsername, setChosenUsername } =
8 useENSCreateStore();
9
10 useUsernameQuery({
11 notifyOnNetworkStatusChange: true,
12 onCompleted: (data) => {
13 if (data.username) {
14 setChosenUsername(data.username.localName);
15 setScreen("success");
16 }
17 },
18 pollInterval: 1500,
19 skip: !transactionHash,
20 variables: {
21 request: {
22 username: { localName: chosenUsername, namespace: HEY_ENS_NAMESPACE }
23 }
24 }
25 });
26
27 return (
28 <Card className="flex flex-col items-center justify-center p-5">
29 <H4>We are minting your ENS name!</H4>
30 <div className="mt-3 text-center font-semibold text-gray-500 dark:text-gray-200">
31 This will take a few seconds to a few minutes. Please be patient.
32 </div>
33 <Spinner className="mt-8" />
34 </Card>
35 );
36};
37
38export default Minting;