Merge branch 'dev'

README.md

@@ -35,9 +35,10 @@ This [turborepo](https://turborepo.org/) uses [pnpm](https://pnpm.io/) as a pack
 
 ### Packages
 
+- [engine](packages/engine): Extensions of [Lattice](https://github.com/lattice-engine/lattice)
 - [eslint-config-custom](packages/eslint-config-custom): custom eslint config used throughout the repo
 - [gltf-extension](packages/gltf-extension): [glTF-Transform](https://github.com/donmccurdy/glTF-Transform) extensions used by the client
-- [react-client](packages/react-client): React components and hooks used by the client engine
+- [protocol](packages/protocol): Extensions of [The Wired Protocol](https://github.com/wired-protocol/spec)
 - [tsconfig](packages/tsconfig): tsconfigs used throughout the repo
 
 ### Utilities

apps/client/app/(navbar)/CreateCard.tsx

@@ -1,7 +1,7 @@
 import { redirect } from "next/navigation";
 
 import { env } from "@/src/env.mjs";
-import { getUserSession } from "@/src/server/auth/getUserSession";
+import { getSession } from "@/src/server/auth/getSession";
 import { db } from "@/src/server/db/drizzle";
 import { world, worldModel } from "@/src/server/db/schema";
 import { nanoidShort } from "@/src/server/nanoid";
@@ -17,7 +17,7 @@ export const preferredRegion = "iad1";
 export async function createWorld() {
   "use server";
 
-  const session = await getUserSession();
+  const session = await getSession();
   if (!session) return;
 
   const publicId = nanoidShort();

apps/client/app/(navbar)/SignInButton.tsx

@@ -27,7 +27,7 @@ export default function SignInButton({ loading }: Props) {
 
       <DialogTrigger asChild>
         <button
-          className={`rounded-full bg-neutral-900 px-6 py-1.5 font-bold text-white outline-neutral-400 transition active:scale-100 ${
+          className={`rounded-full bg-neutral-900 px-6 py-1.5 font-bold text-white outline-2 outline-offset-4 transition active:scale-100 ${
             loading ? "opacity-70" : "hover:scale-105"
           }`}
           disabled={loading}
@@ -60,10 +60,9 @@ export function SignInPage({ beforeOpen }: { beforeOpen?: () => void }) {
         <a
           href="/api/auth/methods/google"
           about="Sign in with Google"
-          className="flex h-11 w-full items-center justify-center space-x-2 rounded-lg border border-neutral-400 px-2 transition hover:bg-neutral-100"
+          className="flex h-11 w-full items-center justify-center rounded-lg border border-neutral-400 px-2 transition hover:bg-neutral-100"
         >
           <FcGoogle className="text-2xl" />
-          <span className="font-bold">Sign in with Google</span>
         </a>
       ) : null}
     </div>

apps/client/app/(navbar)/[handle]/EditProfileButton.tsx

@@ -24,6 +24,8 @@ import TextField from "@/src/ui/TextField";
 import { cropImage } from "@/src/utils/cropImage";
 import { parseError } from "@/src/utils/parseError";
 
+const HEADER_IMAGE_RATIO = 4.4444;
+
 interface Props {
   userId: string;
   username: string;
@@ -180,7 +182,10 @@ export default function EditProfileButton({
                 setBackgroundDisplay(fileUrl);
 
                 // Crop image
-                const croppedFile = await cropImage(fileUrl, 4.4444);
+                const croppedFile = await cropImage(
+                  fileUrl,
+                  HEADER_IMAGE_RATIO
+                );
                 setBackgroundFile(croppedFile);
               }}
               className="h-28 w-full rounded-lg object-cover"

apps/client/app/(navbar)/[handle]/page.tsx

@@ -3,6 +3,7 @@ import { Metadata } from "next";
 import Image from "next/image";
 import { notFound } from "next/navigation";
 
+import { baseMetadata } from "@/app/metadata";
 import { db } from "@/src/server/db/drizzle";
 import { user } from "@/src/server/db/schema";
 import { FixWith } from "@/src/server/db/types";
@@ -48,6 +49,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   return {
     description,
     openGraph: {
+      ...baseMetadata.openGraph,
       description,
       images: image ? [{ url: image }] : undefined,
       title,
@@ -56,6 +58,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     },
     title,
     twitter: {
+      ...baseMetadata.twitter,
       card: image ? "summary_large_image" : "summary",
       description,
       images: image ? [image] : undefined,

apps/client/app/(navbar)/layout.tsx

@@ -20,9 +20,14 @@ export default function NavbarLayout({
           style={{ paddingLeft: "calc(100vw - 100%)" }}
         >
           <div className="max-w-content mx-4 flex justify-between lg:grid lg:grid-cols-3">
-            <Link href="/" className="flex h-full w-fit items-center">
-              <Image src={Logo} alt="logo" priority width={40} height={40} />
-            </Link>
+            <div className="flex h-full items-center">
+              <Link
+                href="/"
+                className="rounded-full outline-2 outline-offset-4"
+              >
+                <Image src={Logo} alt="logo" priority width={40} height={40} />
+              </Link>
+            </div>
 
             <div className="flex items-center justify-center space-x-8 lg:space-x-12">
               <div>

apps/client/app/(navbar)/world/[id]/Tabs.tsx

@@ -1,7 +1,7 @@
 import { WorldMetadata } from "@wired-protocol/types";
 import { eq } from "drizzle-orm";
 
-import { getUserSession } from "@/src/server/auth/getUserSession";
+import { getSession } from "@/src/server/auth/getSession";
 import { db } from "@/src/server/db/drizzle";
 import { world } from "@/src/server/db/schema";
 import ButtonTabs, { TabContent } from "@/src/ui/ButtonTabs";
@@ -16,7 +16,7 @@ interface Props {
 }
 
 export default async function Tabs({ id, metadata }: Props) {
-  const session = await getUserSession();
+  const session = await getSession();
 
   const owner = await fetchWorldOwner(id.value);
 

apps/client/app/(navbar)/world/[id]/page.tsx

@@ -6,11 +6,9 @@ import { Suspense } from "react";
 
 import { HOME_SERVER } from "@/src/constants";
 import { env } from "@/src/env.mjs";
-import {
-  fetchUserProfile,
-  UserProfile,
-} from "@/src/server/helpers/fetchUserProfile";
+import { fetchAuthors } from "@/src/server/helpers/fetchAuthors";
 import { fetchWorld } from "@/src/server/helpers/fetchWorld";
+import { generateWorldMetadata } from "@/src/server/helpers/generateWorldMetadata";
 import { isFromCDN } from "@/src/utils/isFromCDN";
 import { parseWorldId } from "@/src/utils/parseWorldId";
 
@@ -21,37 +19,8 @@ export const revalidate = 60;
 
 type Params = { id: string };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const id = parseWorldId(params.id);
-
-  const found = await fetchWorld(id);
-  if (!found?.metadata) return {};
-
-  const metadata = found.metadata;
-
-  const displayId = id.value.slice(0, 6);
-  const title = metadata.info?.title || `World ${displayId}`;
-
-  const description = metadata.info?.description || "";
-  const authors = metadata.info?.authors;
-  const image = metadata.info?.image;
-
-  return {
-    description,
-    openGraph: {
-      creators: authors ? authors : undefined,
-      description,
-      images: image ? [{ url: image }] : undefined,
-      title,
-    },
-    title,
-    twitter: {
-      card: image ? "summary_large_image" : "summary",
-      description,
-      images: image ? [image] : undefined,
-      title,
-    },
-  };
+export function generateMetadata({ params }: Props): Promise<Metadata> {
+  return generateWorldMetadata(params.id);
 }
 
 interface Props {
@@ -65,26 +34,8 @@ export default async function World({ params }: Props) {
   if (!found?.metadata) notFound();
 
   const metadata = found.metadata;
-  const profiles: UserProfile[] = [];
-
-  if (metadata.info?.authors) {
-    await Promise.all(
-      metadata.info.authors.map(async (author) => {
-        const profile = await fetchUserProfile(author);
-
-        if (!profile) {
-          profiles.push({
-            home: "",
-            metadata: { name: author },
-            username: "",
-          });
-          return;
-        }
-
-        profiles.push(profile);
-      })
-    );
-  }
+
+  const profiles = await fetchAuthors(metadata);
 
   return (
     <div className="flex justify-center">
@@ -159,7 +110,7 @@ export default async function World({ params }: Props) {
 
             <Link
               href={`/play?id=${params.id}`}
-              className="rounded-full bg-neutral-900 py-3 text-center text-lg font-bold text-white outline-neutral-400 transition hover:scale-105"
+              className="rounded-full bg-neutral-900 py-3 text-center text-lg font-bold text-white outline-2 outline-offset-4 transition hover:scale-105"
             >
               Play
             </Link>

apps/client/app/api/auth/login/route.ts

@@ -1,4 +1,4 @@
-import { User } from "lucia-auth";
+import { User } from "lucia";
 import { cookies } from "next/headers";
 import { NextRequest, NextResponse } from "next/server";
 
@@ -7,7 +7,7 @@ import { auth } from "@/src/server/auth/lucia";
 import { AuthMethod, AuthSchema } from "@/src/server/auth/types";
 import { db } from "@/src/server/db/drizzle";
 import { profile } from "@/src/server/db/schema";
-import { nanoidShort } from "@/src/server/nanoid";
+import { genUsername } from "@/src/server/helpers/genUsername";
 
 import { LoginResponse } from "./types";
 
@@ -16,33 +16,34 @@ import { LoginResponse } from "./types";
  */
 export async function POST(request: NextRequest) {
   const parsedInput = AuthSchema.safeParse(await request.json());
-  if (!parsedInput.success)
-    return new Response(JSON.stringify(parsedInput.error), { status: 400 });
+  if (!parsedInput.success) {
+    return NextResponse.json({ error: "Invalid input" }, { status: 400 });
+  }
 
   // Validate signature
   const result = await validateEthereumAuth(request, parsedInput.data);
-  if (!result) return new Response("Invalid signature", { status: 400 });
+  if (!result) {
+    return NextResponse.json({ error: "Invalid signature" }, { status: 400 });
+  }
 
   let user: User;
 
   try {
-    // Get user
+    // Try to get existing user
     const key = await auth.useKey(
       AuthMethod.Ethereum,
       result.data.address,
       null
     );
     user = await auth.getUser(key.userId);
   } catch {
-    // Create user if it doesn't exist
-    const username = nanoidShort();
-
+    // Create new user if it doesn't exist
     user = await auth.createUser({
       attributes: {
         address: result.data.address,
-        username,
+        username: genUsername(),
       },
-      primaryKey: {
+      key: {
         password: null,
         providerId: parsedInput.data.method,
         providerUserId: result.data.address,
@@ -55,7 +56,10 @@ export async function POST(request: NextRequest) {
 
   // Create auth session
   const authRequest = auth.handleRequest({ cookies, request });
-  const session = await auth.createSession(user.userId);
+  const session = await auth.createSession({
+    attributes: {},
+    userId: user.userId,
+  });
   authRequest.setSession(session);
 
   const json: LoginResponse = { user };

apps/client/app/api/auth/login/types.ts

@@ -1,3 +1,3 @@
-import { User } from "lucia-auth";
+import { User } from "lucia";
 
 export type LoginResponse = { user: User };

apps/client/app/api/auth/methods/google/callback/route.ts

@@ -6,7 +6,9 @@ import {
   googleAuth,
 } from "@/src/server/auth/google";
 import { auth } from "@/src/server/auth/lucia";
-import { nanoidShort } from "@/src/server/nanoid";
+import { db } from "@/src/server/db/drizzle";
+import { profile } from "@/src/server/db/schema";
+import { genUsername } from "@/src/server/helpers/genUsername";
 
 export const dynamic = "force-dynamic";
 
@@ -32,14 +34,20 @@ export async function GET(request: NextRequest) {
   // Log in the user, or create a new user if they don't exist
   const { existingUser, createUser } = await googleAuth.validateCallback(code);
 
-  const user =
-    existingUser ||
-    (await createUser({
-      username: nanoidShort(),
-    }));
+  let user = existingUser;
+
+  if (!user) {
+    user = await createUser({ attributes: { username: genUsername() } });
+
+    // Create profile
+    await db.insert(profile).values({ userId: user.userId });
+  }
 
   // Create auth session
-  const session = await auth.createSession(user.userId);
+  const session = await auth.createSession({
+    attributes: {},
+    userId: user.userId,
+  });
 
   const authRequest = auth.handleRequest({ cookies, request });
   authRequest.setSession(session);

apps/client/app/api/auth/profile/route.ts

@@ -14,11 +14,11 @@ import { UpdateProfileSchema } from "./types";
  */
 export async function GET(request: NextRequest) {
   const authRequest = auth.handleRequest({ cookies, request });
-  const { session } = await authRequest.validateUser();
+  const session = await authRequest.validate();
   if (!session) return new Response(null, { status: 401 });
 
   const found = await db.query.profile.findFirst({
-    where: eq(profile.userId, session.userId),
+    where: eq(profile.userId, session.user.userId),
   });
   if (!found) return new Response(null, { status: 404 });
 
@@ -40,7 +40,7 @@ export async function PATCH(request: NextRequest) {
     return new Response(JSON.stringify(parsed.error), { status: 400 });
 
   const authRequest = auth.handleRequest({ cookies, request });
-  const { session } = await authRequest.validateUser();
+  const session = await authRequest.validate();
   if (!session) return new Response(null, { status: 401 });
 
   const { username, bio, imageKey, backgroundKey } = parsed.data;
@@ -52,7 +52,7 @@ export async function PATCH(request: NextRequest) {
         backgroundKey,
         bio,
         imageKey,
-        userId: session.userId,
+        userId: session.user.userId,
       })
       .onDuplicateKeyUpdate({
         set: {
@@ -66,7 +66,7 @@ export async function PATCH(request: NextRequest) {
       await tx
         .update(userTable)
         .set({ username })
-        .where(eq(userTable.id, session.userId));
+        .where(eq(userTable.id, session.user.userId));
     }
   });