yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { createTrackedSelector } from "react-tracked";
2import { useAccount } from "wagmi";
3import { create } from "zustand";
4import WalletSelector from "@/components/Shared/Auth/WalletSelector";
5import ChooseUsername from "./ChooseUsername";
6import Minting from "./Minting";
7import Success from "./Success";
8
9interface SignupState {
10 chosenUsername: string;
11 accountAddress: string;
12 screen: "choose" | "minting" | "success";
13 transactionHash: string;
14 onboardingToken: string;
15 setChosenUsername: (username: string) => void;
16 setAccountAddress: (accountAddress: string) => void;
17 setScreen: (screen: "choose" | "minting" | "success") => void;
18 setTransactionHash: (hash: string) => void;
19 setOnboardingToken: (token: string) => void;
20}
21
22const store = create<SignupState>((set) => ({
23 accountAddress: "",
24 chosenUsername: "",
25 onboardingToken: "",
26 screen: "choose",
27 setAccountAddress: (accountAddress) => set({ accountAddress }),
28 setChosenUsername: (username) => set({ chosenUsername: username }),
29 setOnboardingToken: (token) => set({ onboardingToken: token }),
30 setScreen: (screen) => set({ screen }),
31 setTransactionHash: (hash) => set({ transactionHash: hash }),
32 transactionHash: ""
33}));
34
35export const useSignupStore = createTrackedSelector(store);
36
37const Signup = () => {
38 const { screen } = useSignupStore();
39 const { connector: activeConnector } = useAccount();
40
41 return activeConnector?.id ? (
42 <div className="space-y-2.5">
43 {screen === "choose" ? (
44 <ChooseUsername />
45 ) : screen === "minting" ? (
46 <Minting />
47 ) : (
48 <Success />
49 )}
50 </div>
51 ) : (
52 <WalletSelector />
53 );
54};
55
56export default Signup;