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 { createTrackedSelector } from "react-tracked";
2import { create } from "zustand";
3import NotLoggedIn from "@/components/Shared/NotLoggedIn";
4import PageLayout from "@/components/Shared/PageLayout";
5import { useAccountStore } from "@/store/persisted/useAccountStore";
6import Choose from "./Choose";
7import Minting from "./Minting";
8import Success from "./Success";
9
10interface ENSCreateState {
11 chosenUsername: string;
12 screen: "choose" | "minting" | "success";
13 transactionHash: string;
14 setChosenUsername: (username: string) => void;
15 setScreen: (screen: "choose" | "minting" | "success") => void;
16 setTransactionHash: (hash: string) => void;
17}
18
19const store = create<ENSCreateState>((set) => ({
20 chosenUsername: "",
21 screen: "choose",
22 setChosenUsername: (username) => set({ chosenUsername: username }),
23 setScreen: (screen) => set({ screen }),
24 setTransactionHash: (hash) => set({ transactionHash: hash }),
25 transactionHash: ""
26}));
27
28export const useENSCreateStore = createTrackedSelector(store);
29
30const ENS = () => {
31 const { currentAccount } = useAccountStore();
32 const { screen } = useENSCreateStore();
33
34 if (!currentAccount) {
35 return <NotLoggedIn />;
36 }
37
38 return (
39 <PageLayout title="Bookmarks">
40 {screen === "choose" && <Choose />}
41 {screen === "minting" && <Minting />}
42 {screen === "success" && <Success />}
43 </PageLayout>
44 );
45};
46
47export default ENS;