feat: add avatar upload and error message

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

@@ -11,12 +11,16 @@ import {
   FormLabel,
 } from "@/components/ui/Form"
 import { Input } from "@/components/ui/Input"
+import { useToast } from "@/components/ui/hooks/useToast"
+import { cn } from "@/lib/utils"
 // import useUser from "components/[guild]/hooks/useUser"
 import { FarcasterProfile } from "@guildxyz/types"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { User } from "@phosphor-icons/react"
+import { Spinner, UploadSimple, User } from "@phosphor-icons/react"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
 import { AvatarFallback, AvatarImage } from "@radix-ui/react-avatar"
+import useDropzone from "hooks/useDropzone"
+import usePinata from "hooks/usePinata"
 import { useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { z } from "zod"
@@ -36,6 +40,7 @@ export const StartProfile: OnboardingChain = () => {
   const [farcasterProfile, setFarcasterProfile] = useState<FarcasterProfile>()
   const [method, setMethod] = useState<CreateMethod>()
   const [isFCLoading, setIsFCLoading] = useState(false)
+  const { toast } = useToast()
 
   useEffect(() => {
     if (method !== CreateMethod.FillByFarcaster) return
@@ -78,10 +83,55 @@ export const StartProfile: OnboardingChain = () => {
 
   const createProfile = useCreateProfile()
   async function onSubmit(values: z.infer<typeof profileSchema>) {
-    // createProfile.onSubmit(values)
+    createProfile.onSubmit(values)
     console.log("onSubmit", values)
   }
 
+  const { isUploading, onUpload } = usePinata({
+    control: form.control,
+    fieldToSetOnSuccess: "profileImageUrl",
+    onError: (error) => {
+      toast({
+        variant: "error",
+        title: "Failed to upload file",
+        description: error,
+      })
+    },
+  })
+
+  const [uploadProgress, setUploadProgress] = useState(0)
+  const { isDragActive, fileRejections, getRootProps } = useDropzone({
+    multiple: false,
+    noClick: false,
+    maxSizeMb: 4,
+    onDrop: (acceptedFiles) => {
+      if (!acceptedFiles[0]) return
+      onUpload({
+        data: [acceptedFiles[0]],
+        onProgress: setUploadProgress,
+      })
+    },
+  })
+
+  useEffect(() => {
+    for (const { errors, file } of fileRejections) {
+      for (const error of errors) {
+        toast({
+          variant: "error",
+          title: `Failed to upload file "${file.name}"`,
+          description: error.message,
+        })
+      }
+    }
+  }, [fileRejections])
+
+  let avatarFallBackIcon = <User size={32} />
+  if (isDragActive) {
+    avatarFallBackIcon = <UploadSimple size={32} className="animate-wiggle" />
+  } else if (isUploading || (uploadProgress !== 0 && uploadProgress !== 1)) {
+    avatarFallBackIcon = <Spinner size={32} className="animate-spin" />
+  }
+
   return (
     <div className="w-[28rem] space-y-3 p-8">
       <h1 className="mb-10 text-pretty text-center font-bold font-display text-2xl leading-none tracking-tight">
@@ -94,16 +144,23 @@ export const StartProfile: OnboardingChain = () => {
             control={form.control}
             name="profileImageUrl"
             render={({ field }) => (
-              <Avatar className="mb-8 size-36 self-center border bg-card-secondary">
-                <AvatarImage
-                  src={field.value}
-                  width={144}
-                  height={144}
-                ></AvatarImage>
-                <AvatarFallback>
-                  <User size={32} />
-                </AvatarFallback>
-              </Avatar>
+              <Button
+                variant="unstyled"
+                className={cn(
+                  "mb-8 size-36 self-center rounded-full border-2 border-dotted",
+                  { "border-solid": field.value }
+                )}
+                {...getRootProps()}
+              >
+                <Avatar className="size-36 bg-card-secondary">
+                  <AvatarImage
+                    src={field.value}
+                    width={144}
+                    height={144}
+                  ></AvatarImage>
+                  <AvatarFallback>{avatarFallBackIcon}</AvatarFallback>
+                </Avatar>
+              </Button>
             )}
           />
 
@@ -162,6 +219,7 @@ export const StartProfile: OnboardingChain = () => {
                 className="w-full"
                 type="submit"
                 colorScheme="success"
+                isLoading={createProfile.isLoading}
                 disabled={!form.formState.isValid}
               >
                 Start my profile

src/app/(marketing)/create-profile/_hooks/useCreateProfile.tsx

@@ -1,5 +1,4 @@
 import { useToast } from "@/components/ui/hooks/useToast"
-import useJsConfetti from "components/create-guild/hooks/useJsConfetti"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import { useRouter } from "next/navigation"
 import fetcher from "utils/fetcher"
@@ -9,7 +8,6 @@ import { profileSchema } from "../schemas"
 export const useCreateProfile = () => {
   const router = useRouter()
   const { toast } = useToast()
-  const triggerConfetti = useJsConfetti()
 
   const createProfile = async (signedValidation: SignedValidation) =>
     fetcher(`/v2/profiles`, {
@@ -19,19 +17,19 @@ export const useCreateProfile = () => {
 
   const submitWithSign = useSubmitWithSign<unknown>(createProfile, {
     onSuccess: (response) => {
-      triggerConfetti()
       toast({
         variant: "success",
         title: "Successfully created profile",
       })
       // router.push(`/profile/${response.username}`)
     },
-    onError: (error) =>
+    onError: (response) => {
       toast({
         variant: "error",
         title: "Failed to create profile",
-        description: error?.message,
-      }),
+        description: response.error,
+      })
+    },
   })
   return {
     ...submitWithSign,

tailwind.config.ts

@@ -155,6 +155,10 @@ const config = {
         },
       },
       keyframes: {
+        wiggle: {
+          '0%, 100%': { transform: 'rotate(-3deg)' },
+          '50%': { transform: 'rotate(3deg)' },
+        },
         "accordion-down": {
           from: { height: "0" },
           to: { height: "var(--radix-accordion-content-height)" },
@@ -177,6 +181,7 @@ const config = {
         },
       },
       animation: {
+        wiggle: 'wiggle 1s ease-in-out infinite',
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "caret-blink": "caret-blink 1.25s ease-out infinite",
@@ -189,7 +194,7 @@ const config = {
         modal: "1400",
         popover: "1500",
         toast: "1700",
-        tooltip: "1800", 
+        tooltip: "1800",
       }
     },
   },