feat: add models to /create-profile scenes (#1441)

* feat: add models to scene

* refactor: use backend schemas

* chore: compress guild pass models

src/app/(marketing)/create-profile/_components/BasicGuildPass.tsx

@@ -0,0 +1,52 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx [email protected] basic_guild_pass.glb --transform --types
+Files: basic_guild_pass.glb [10.27MB] > /home/senkora/projects/guild.xyz/public/models/basic_guild_pass-transformed.glb [551.1KB] (95%)
+*/
+
+import { useGLTF } from "@react-three/drei"
+import * as THREE from "three"
+import { GLTF } from "three-stdlib"
+
+type GLTFResult = GLTF & {
+  nodes: {
+    Curve: THREE.Mesh
+    Curve001: THREE.Mesh
+    Curve003: THREE.Mesh
+  }
+  materials: {
+    SVGMat: THREE.MeshStandardMaterial
+    "Material.001": THREE.MeshStandardMaterial
+    "Material.002": THREE.MeshStandardMaterial
+  }
+  // animations: GLTFAction[]
+}
+
+export function Model(props: JSX.IntrinsicElements["group"]) {
+  const { nodes, materials } = useGLTF(
+    "models/basic_guild_pass-transformed.glb"
+  ) as GLTFResult
+  return (
+    <group {...props} dispose={null}>
+      <mesh
+        geometry={nodes.Curve.geometry}
+        material={materials.SVGMat}
+        scale={6.649}
+      />
+      <mesh
+        geometry={nodes.Curve001.geometry}
+        material={materials["Material.001"]}
+        position={[-1.598, 0.015, 0.781]}
+        scale={6.86}
+      />
+      <mesh
+        geometry={nodes.Curve003.geometry}
+        material={materials["Material.002"]}
+        position={[-0.597, 0.018, 0.315]}
+        scale={6.104}
+      />
+    </group>
+  )
+}
+
+useGLTF.preload("models/basic_guild_pass-transformed.glb")

src/app/(marketing)/create-profile/_components/ChoosePass.tsx

@@ -44,7 +44,7 @@ export const ChoosePass: OnboardingChain = ({ dispatchChainAction }) => {
             <CarouselItem className="select-none" key={title}>
               <article className="flex h-full flex-col items-center pb-6 text-center">
                 <div className="mb-2 h-48 w-full">
-                  <GuildPassScene />{" "}
+                  <GuildPassScene sceneVariant={title} />
                 </div>
                 <div className="px-4">
                   <h2 className="font-extrabold text-lg">{title}</h2>
@@ -89,7 +89,7 @@ export const ChoosePass: OnboardingChain = ({ dispatchChainAction }) => {
           >
             <article className="flex flex-col items-center pb-6 text-center">
               <div className="mb-2 h-48">
-                <GuildPassScene />
+                <GuildPassScene sceneVariant={title} />
               </div>
               <div className="px-8">
                 <h2 className="font-extrabold text-lg">{title}</h2>

src/app/(marketing)/create-profile/_components/ClaimPass.tsx

@@ -34,7 +34,7 @@ export const ClaimPass: OnboardingChain = ({ dispatchChainAction }) => {
   return (
     <div className="max-w-md p-8">
       <div className="mb-12 h-48 w-full">
-        <GuildPassScene />
+        <GuildPassScene sceneVariant="Single Pass" />
       </div>
       <h1 className="mb-14 text-pretty text-center font-extrabold text-2xl leading-none tracking-tighter">
         Claim your Guild Pass and begin an epic adventure!

src/app/(marketing)/create-profile/_components/GoldGuildPass.tsx

@@ -0,0 +1,52 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx [email protected] gold_guild_pass.glb --transform --types
+Files: gold_guild_pass.glb [10.27MB] > /home/senkora/projects/guild.xyz/public/models/gold_guild_pass-transformed.glb [551.06KB] (95%)
+*/
+
+import { useGLTF } from "@react-three/drei"
+import * as THREE from "three"
+import { GLTF } from "three-stdlib"
+
+type GLTFResult = GLTF & {
+  nodes: {
+    Curve: THREE.Mesh
+    Curve001: THREE.Mesh
+    Curve003: THREE.Mesh
+  }
+  materials: {
+    "Material.003": THREE.MeshStandardMaterial
+    "Material.001": THREE.MeshStandardMaterial
+    "Material.004": THREE.MeshStandardMaterial
+  }
+  // animations: GLTFAction[]nimations: GLTFAction[]
+}
+
+export function Model(props: JSX.IntrinsicElements["group"]) {
+  const { nodes, materials } = useGLTF(
+    "models/gold_guild_pass-transformed.glb"
+  ) as GLTFResult
+  return (
+    <group {...props} dispose={null}>
+      <mesh
+        geometry={nodes.Curve.geometry}
+        material={materials["Material.003"]}
+        scale={6.649}
+      />
+      <mesh
+        geometry={nodes.Curve001.geometry}
+        material={materials["Material.001"]}
+        position={[-1.598, 0.015, 0.781]}
+        scale={6.86}
+      />
+      <mesh
+        geometry={nodes.Curve003.geometry}
+        material={materials["Material.004"]}
+        position={[-0.66, 0.003, 0.32]}
+        scale={6.246}
+      />
+    </group>
+  )
+}
+
+useGLTF.preload("models/gold_guild_pass-transformed.glb")

src/app/(marketing)/create-profile/_components/GuildPassScene.tsx

@@ -1,19 +1,35 @@
 "use client"
 
-import { Float } from "@react-three/drei"
-import { Canvas, ThreeElements } from "@react-three/fiber"
+import { Environment, Float } from "@react-three/drei"
+import { Canvas } from "@react-three/fiber"
+import { FunctionComponent } from "react"
 import * as THREE from "three"
+import { SUBSCRIPTIONS } from "../constants"
+import { Model as BasicModel } from "./BasicGuildPass"
+import { Model as GoldModel } from "./GoldGuildPass"
 
-function GuildPass(props: ThreeElements["mesh"]) {
-  return (
-    <mesh {...props} scale={4} rotation={new THREE.Euler(0.0, 0.1, 0.0)}>
-      <boxGeometry args={[1.4, 0.6, 0.1]} />
-      <meshStandardMaterial color="orange" wireframe />
-    </mesh>
-  )
+type SceneVariant = (typeof SUBSCRIPTIONS)[number]["title"]
+
+function SinglePass() {
+  return <BasicModel rotation={new THREE.Euler(Math.PI / 2, 0.0, 0.0)} scale={2} />
+}
+
+function BundlePass() {
+  return <BasicModel rotation={new THREE.Euler(Math.PI / 2, 0.0, 0.0)} scale={2} />
+}
+
+function LifetimePass() {
+  return <GoldModel rotation={new THREE.Euler(Math.PI / 2, 0.0, 0.0)} scale={2} />
+}
+
+const Variants: Record<SceneVariant, FunctionComponent> = {
+  "Single Pass": SinglePass,
+  "Bundle Pass": BundlePass,
+  "Lifetime Pass": LifetimePass,
 }
 
-export const GuildPassScene = () => {
+export const GuildPassScene = ({ sceneVariant }: { sceneVariant: SceneVariant }) => {
+  const Variant = Variants[sceneVariant]
   return (
     <Canvas>
       <ambientLight intensity={Math.PI / 2} />
@@ -26,8 +42,9 @@ export const GuildPassScene = () => {
       />
       <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
       <Float floatIntensity={6} speed={2.4}>
-        <GuildPass position={[0, 0, 0]} />
+        <Variant />
       </Float>
+      <Environment preset="city" />
     </Canvas>
   )
 }

src/app/(marketing)/create-profile/_components/OnboardingDriver.tsx

@@ -3,7 +3,7 @@ import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hoo
 import { Button } from "@/components/ui/Button"
 import { cardClassName } from "@/components/ui/Card"
 import { cn } from "@/lib/utils"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import { SUBSCRIPTIONS } from "../constants"
 import { ChainData, DispatchChainAction, OnboardingChain } from "../types"
 import { ChoosePass } from "./ChoosePass"
@@ -19,14 +19,14 @@ const chains: OnboardingChain[] = [
 ] as const
 
 export const OnboardingDriver = () => {
-  const [chainIndex, setChainIndex] = useState(3)
+  const [chainIndex, setChainIndex] = useState(1)
   const { address } = useWeb3ConnectionManager()
 
-  useEffect(() => {
-    if (!address) {
-      setChainIndex(0)
-    }
-  }, [address])
+  // useEffect(() => {
+  //   if (!address) {
+  //     setChainIndex(0)
+  //   }
+  // }, [address])
 
   // TODO: remove default chosen subscription, as it is only there for debug
   // purposes

src/app/(marketing)/create-profile/_components/PurchasePass.tsx

@@ -39,7 +39,7 @@ export const PurchasePass: OnboardingChain = ({
               className="size-full"
             />
           ) : (
-            <GuildPassScene />
+            <GuildPassScene sceneVariant={title} />
           )}
         </div>
         <div className="flex w-full justify-between px-8">

src/app/(marketing)/create-profile/_components/StartProfile.tsx

@@ -14,8 +14,7 @@ import {
 import { Input } from "@/components/ui/Input"
 import { useToast } from "@/components/ui/hooks/useToast"
 import { cn } from "@/lib/utils"
-import { profileSchema } from "@/lib/validations/profileSchema"
-import { Schemas } from "@guildxyz/types"
+import { Schemas, schemas } from "@guildxyz/types"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Spinner, UploadSimple, User } from "@phosphor-icons/react"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
@@ -54,7 +53,7 @@ export const StartProfile: OnboardingChain = () => {
   }, [farcasterProfile])
 
   const form = useForm<Schemas["ProfileCreation"]>({
-    resolver: zodResolver(profileSchema),
+    resolver: zodResolver(schemas.ProfileCreationSchema),
     defaultValues: {
       name: "",
       username: "",