feat: Publish post and basic user public page

contract/p/gnovox/gnovox.gno

@@ -37,9 +37,27 @@ func UpdateUser(u User, username string) User {
 }
 
 func (u *User) Json() *json.Node {
+	posts := json.ArrayNode("posts", []*json.Node{})
+	u.Posts.Iterate("", "", func(address string, value interface{}) bool {
+		p := value.(*Post)
+		jsonNode := p.Json()
+		posts.AppendArray(jsonNode)
+		return false
+	})
+
 	node := json.ObjectNode("", map[string]*json.Node{
 		"address": json.StringNode("address", u.Address.String()),
 		"username": json.StringNode("username", u.Username),
+		"posts": posts,
+	})
+	return node
+}
+
+func (p *Post) Json() *json.Node {
+	node := json.ObjectNode("", map[string]*json.Node{
+		"slug": json.StringNode("slug", p.Slug),
+		"title": json.StringNode("title", p.Title),
+		"body": json.StringNode("body", p.Body),
 	})
 	return node
 }

contract/r/gnovox/gnovox.gno

@@ -12,51 +12,62 @@ var (
 	users      avl.Tree // address -> *User
 )
 
-func AddUser(username string) error {
+func AddUser(username string) {
 	caller := std.GetOrigCaller()
 
 	if _, found := users.Get(caller.String()); found {
 		// TODO: also check username
-		return ErrUserExist
+		panic(ErrUserExist)
 	}
 
 	u := gnovox.NewUser(caller, username)
 	users.Set(caller.String(), &u)
-	return nil
 }
 
-func UpdateUser(username string) error {
+func UpdateUser(username string) {
 	caller := std.GetOrigCaller()
 
 	// TODO: check that username isn't already taken
 	value, found := users.Get(caller.String());
 	if found == false {
-		return ErrUserNotFound
+		panic(ErrUserNotFound)
 	}
 	currentUser := value.(*gnovox.User)
 	u := gnovox.UpdateUser(*currentUser, username)
 	users.Set(caller.String(), &u)
-	return nil
 }
 
 func GetUserByAddress(address std.Address) string {
-	if value, found := users.Get(address.String()); found {
-		u := value.(*gnovox.User)
-		jsonResponse := u.Json()
+	value, found := users.Get(address.String());
+
+	if found == false {
+		panic(ErrUserNotFound)
+	}
+	u := value.(*gnovox.User)
+	jsonResponse := u.Json()
+
+	b, err := json.Marshal(jsonResponse)
+	checkErr(err)
 
-		b, err := json.Marshal(jsonResponse)
-		checkErr(err)
+	return string(b)
+}
+
+func NewPost(slug, title, body string) {
+	caller := std.GetOrigCaller()
 
-		return string(b)
+	value, found := users.Get(caller.String());
+	if found == false {
+		panic(ErrUserNotFound)
 	}
-	panic(ErrUserNotFound)
-	return ""
+	u := value.(*gnovox.User)
+	err := u.NewPost(caller, slug, title, body, "") // TODO: Ask pubDate to users
+	checkErr(err)
 }
 
 func GetUsers() string {
 	jsonResponse := json.ArrayNode("", []*json.Node{})
 
-	users.ReverseIterate("", "", func(address string, value interface{}) bool {
+	users.Iterate("", "", func(address string, value interface{}) bool {
 		u := value.(*gnovox.User)
 		jsonNode := u.Json()
 		jsonResponse.AppendArray(jsonNode)

front/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@gnolang/gno-js-client": "^1.2.3",
     "@hookform/resolvers": "^3.6.0",
+    "@mdxeditor/editor": "^3.6.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
@@ -34,6 +35,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "@tanstack/router-devtools": "^1.40.0",
     "@tanstack/router-plugin": "^1.39.13",
     "@types/node": "^20.14.8",

front/src/components/WalletButton.tsx

@@ -9,31 +9,23 @@ import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
-	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu.tsx";
 import { useProviderStore } from "@/stores/provider.ts";
 import { parseGnoEvaluateJsonResponse } from "@/utils";
 import { Link, useNavigate } from "@tanstack/react-router";
-import { z } from "zod";
-import { LogOut, Settings } from "lucide-react";
-
-const userSchema = z.object({
-	address: z.string(),
-	username: z.string(),
-});
+import { LogOut, Settings, User } from "lucide-react";
+import { userSchema } from "@/types/user.ts";
 
 const WalletButton: FC = () => {
 	const { provider } = useProviderStore();
 	const navigate = useNavigate();
 
 	const { toast } = useToast();
-	const { setAddress, setUsername, setChainID } = useAccountStore();
+	const { address, setAddress, setUser } = useAccountStore();
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 
-	const [accountInfo, setAccountInfo] = useState<IAccountInfo | null>(null);
-
 	const handleWalletConnect = async () => {
 		setIsLoading(true);
 
@@ -49,8 +41,6 @@ const WalletButton: FC = () => {
 
 			// Update the account context
 			setAddress(accountInfo.address);
-			setAccountInfo(accountInfo);
-			setChainID(constants.chainID);
 
 			try {
 				const response = await provider.evaluateExpression(
@@ -59,7 +49,7 @@ const WalletButton: FC = () => {
 				);
 				const jsonResponse = parseGnoEvaluateJsonResponse(response);
 				const parsedResponse = userSchema.parse(jsonResponse);
-				setUsername(parsedResponse.username);
+				setUser(parsedResponse);
 			} catch (error) {
 				await navigate({ to: "/signup" });
 			}
@@ -83,13 +73,12 @@ const WalletButton: FC = () => {
 
 	const onLogout = () => {
 		setAddress(null);
-		setAccountInfo(null);
-		setChainID(null);
+		setUser(null);
 	};
 
 	return (
 		<>
-			{accountInfo === null ? (
+			{address === null ? (
 				<Button onClick={handleWalletConnect} disabled={isLoading}>
 					Connect wallet
 				</Button>
@@ -107,14 +96,20 @@ const WalletButton: FC = () => {
 						</Button>
 					</DropdownMenuTrigger>
 					<DropdownMenuContent align="end">
-						<DropdownMenuLabel>My Account</DropdownMenuLabel>
-						<DropdownMenuSeparator />
+						<DropdownMenuItem>
+							{/*TODO: Use username here*/}
+							<Link to={`/user/${address}`} className="flex gap-1">
+								<User />
+								<span className="my-auto">Profile</span>
+							</Link>
+						</DropdownMenuItem>
 						<DropdownMenuItem>
 							<Link to="/settings" className="flex gap-1">
 								<Settings />
 								<span className="my-auto">Settings</span>
 							</Link>
 						</DropdownMenuItem>
+						<DropdownMenuSeparator />
 						<DropdownMenuItem onClick={onLogout} className="cursor-pointer gap-1">
 							<LogOut />
 							<span className="my-auto">Logout</span>

front/src/routeTree.gen.ts

@@ -16,13 +16,19 @@ import { Route as rootRoute } from "./routes/__root";
 
 // Create Virtual Routes
 
+const WriteLazyImport = createFileRoute("/write")();
 const SignupLazyImport = createFileRoute("/signup")();
 const SettingsLazyImport = createFileRoute("/settings")();
 const IndexLazyImport = createFileRoute("/")();
 const UserUsernameLazyImport = createFileRoute("/user/$username")();
 
 // Create/Update Routes
 
+const WriteLazyRoute = WriteLazyImport.update({
+	path: "/write",
+	getParentRoute: () => rootRoute,
+} as any).lazy(() => import("./routes/write.lazy").then((d) => d.Route));
+
 const SignupLazyRoute = SignupLazyImport.update({
 	path: "/signup",
 	getParentRoute: () => rootRoute,
@@ -68,6 +74,13 @@ declare module "@tanstack/react-router" {
 			preLoaderRoute: typeof SignupLazyImport;
 			parentRoute: typeof rootRoute;
 		};
+		"/write": {
+			id: "/write";
+			path: "/write";
+			fullPath: "/write";
+			preLoaderRoute: typeof WriteLazyImport;
+			parentRoute: typeof rootRoute;
+		};
 		"/user/$username": {
 			id: "/user/$username";
 			path: "/user/$username";
@@ -84,6 +97,7 @@ export const routeTree = rootRoute.addChildren({
 	IndexLazyRoute,
 	SettingsLazyRoute,
 	SignupLazyRoute,
+	WriteLazyRoute,
 	UserUsernameLazyRoute,
 });
 
@@ -98,6 +112,7 @@ export const routeTree = rootRoute.addChildren({
         "/",
         "/settings",
         "/signup",
+        "/write",
         "/user/$username"
       ]
     },
@@ -110,6 +125,9 @@ export const routeTree = rootRoute.addChildren({
     "/signup": {
       "filePath": "signup.lazy.tsx"
     },
+    "/write": {
+      "filePath": "write.lazy.tsx"
+    },
     "/user/$username": {
       "filePath": "user/$username.lazy.tsx"
     }

front/src/routes/__root.tsx

@@ -17,10 +17,12 @@ const RootLayout = () => {
 					</Link>
 				</div>
 				<div className="flex items-center gap-4">
-					<Button variant="ghost" className="gap-2" disabled={address === null}>
-						<SquarePen />
-						Write
-					</Button>
+					<Link to="/write">
+						<Button variant="ghost" className="gap-2" disabled={address === null}>
+							<SquarePen />
+							Write
+						</Button>
+					</Link>
 
 					<WalletButton />
 				</div>

front/src/routes/settings.lazy.tsx

@@ -18,16 +18,18 @@ const profileFormSchema = z.object({
 type ProfileFormSchema = z.infer<typeof profileFormSchema>;
 
 const Settings = () => {
-	const { address, username, setUsername } = useAccountStore();
+	const { address, user, setUser } = useAccountStore();
 
 	const form = useForm<ProfileFormSchema>({
 		resolver: zodResolver(profileFormSchema),
 		defaultValues: {
-			username: username ?? undefined,
+			username: user?.username ?? undefined,
 		},
 	});
 
 	const onSubmit = async (values: ProfileFormSchema) => {
+		if (user === null) return;
+
 		await AdenaService.sendTransaction(
 			[
 				{
@@ -43,7 +45,7 @@ const Settings = () => {
 			],
 			5000000,
 		);
-		setUsername(values.username);
+		setUser({ ...user, username: values.username });
 	};
 
 	return (
@@ -57,7 +59,7 @@ const Settings = () => {
 						<span className="font-semibold text-primary">General</span>
 					</nav>
 					<div className="grid gap-6">
-						<Card x-chunk="dashboard-04-chunk-1">
+						<Card>
 							<CardHeader>
 								<CardTitle>Profile</CardTitle>
 								<CardDescription>Update your information</CardDescription>

front/src/routes/user/$username.lazy.tsx

@@ -1,7 +1,50 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
+import "@mdxeditor/editor/style.css";
+import { useEffect, useState } from "react";
+import { constants } from "@/constants.ts";
+import { parseGnoEvaluateJsonResponse } from "@/utils";
+import { useProviderStore } from "@/stores/provider.ts";
+import { useToast } from "@/components/ui/use-toast.ts";
+import { User, userSchema } from "@/types/user.ts";
 
 const UserPage = () => {
-	return <div>Hello /user/$userId!</div>;
+	const { provider } = useProviderStore();
+	const { toast } = useToast();
+	const { username } = Route.useParams();
+	const [pageUser, setPageUser] = useState<User | null>(null);
+
+	useEffect(() => {
+		(async () => {
+			try {
+				// TODO: Get by username instead
+				const response = await provider.evaluateExpression(constants.realmPath, `GetUserByAddress("${username}")`);
+				const jsonResponse = parseGnoEvaluateJsonResponse(response);
+				const parsedResponse = userSchema.parse(jsonResponse);
+				setPageUser(parsedResponse);
+			} catch (error) {
+				// TODO: redirect to 404
+				toast({
+					title: "User not found",
+					variant: "destructive",
+				});
+			}
+		})();
+	}, []);
+
+	if (pageUser !== null) {
+		return (
+			<>
+				<p>Address: {pageUser.address}</p>
+				<p>Username: {pageUser.username}</p>
+				{pageUser.posts.map((post) => (
+					<div key={post.slug}>
+						<p>{post.title}</p>
+						<p>{post.slug}</p>
+					</div>
+				))}
+			</>
+		);
+	}
 };
 
 export const Route = createLazyFileRoute("/user/$username")({