fix: align code to suggestions

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

@@ -33,13 +33,16 @@ enum CreateMethod {
 }
 
 export const StartProfile: OnboardingChain = () => {
-  const { farcasterProfiles = [], isLoading: isUserLoading } = useUser()
+  const { farcasterProfiles = [] } = useUser()
   const farcasterProfile = farcasterProfiles.at(0)
-  const [method, setMethod] = useState<CreateMethod>()
+  const [method, setMethod] = useState<CreateMethod | undefined>(
+    farcasterProfile ? CreateMethod.FillByFarcaster : undefined
+  )
   const { toast } = useToast()
 
   useEffect(() => {
-    if (!farcasterProfile || method !== CreateMethod.FillByFarcaster) return
+    if (!farcasterProfile) return
+    setMethod(CreateMethod.FillByFarcaster)
     form.setValue(
       "name",
       farcasterProfile.username ?? form.getValues()?.name ?? "",
@@ -48,7 +51,7 @@ export const StartProfile: OnboardingChain = () => {
     form.setValue("profileImageUrl", farcasterProfile.avatar, {
       shouldValidate: true,
     })
-  }, [farcasterProfile, method])
+  }, [farcasterProfile])
 
   const form = useForm<z.infer<typeof profileSchema>>({
     resolver: zodResolver(profileSchema),
@@ -62,7 +65,6 @@ export const StartProfile: OnboardingChain = () => {
   const createProfile = useCreateProfile()
   async function onSubmit(values: z.infer<typeof profileSchema>) {
     createProfile.onSubmit(values)
-    console.log("onSubmit", values)
   }
 
   const { isUploading, onUpload } = usePinata({
@@ -78,31 +80,25 @@ export const StartProfile: OnboardingChain = () => {
   })
 
   const [uploadProgress, setUploadProgress] = useState(0)
-  const { isDragActive, fileRejections, getRootProps } = useDropzone({
+  const { isDragActive, getRootProps } = useDropzone({
     multiple: false,
     noClick: false,
-    maxSizeMb: 4,
     onDrop: (acceptedFiles) => {
       if (!acceptedFiles[0]) return
       onUpload({
         data: [acceptedFiles[0]],
         onProgress: setUploadProgress,
       })
     },
+    onError: (error) => {
+      toast({
+        variant: "error",
+        title: `Failed to upload file`,
+        description: error.message,
+      })
+    },
   })
 
-  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" />
@@ -151,22 +147,14 @@ export const StartProfile: OnboardingChain = () => {
 
           {method === undefined ? (
             <>
-              {farcasterProfile ? (
-                <Button
-                  className="ml-0 w-full gap-2 bg-farcaster hover:bg-farcaster-hover active:bg-farcaster-active"
-                  size="md"
-                  onClick={() => setMethod(CreateMethod.FillByFarcaster)}
-                >
-                  <FarcasterImage />
-                  Fill using Farcaster
-                </Button>
-              ) : (
-                <ConnectFarcasterButton className="ml-0 w-full gap-2" size="md">
-                  <FarcasterImage />
-                  Connect farcaster
-                </ConnectFarcasterButton>
-              )}
-
+              <ConnectFarcasterButton
+                className="ml-0 w-full gap-2"
+                size="md"
+                disabled={!!farcasterProfile}
+              >
+                <FarcasterImage />
+                Connect farcaster
+              </ConnectFarcasterButton>
               <Button
                 variant="ghost"
                 onClick={() => setMethod(CreateMethod.FromBlank)}

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

@@ -9,7 +9,7 @@ import { profileSchema } from "../schemas"
 export const useCreateProfile = () => {
   const router = useRouter()
   const { toast } = useToast()
-  const { confetti } = useConfetti()
+  const { confettiPlayer } = useConfetti()
 
   const createProfile = async (signedValidation: SignedValidation) =>
     fetcher(`/v2/profiles`, {
@@ -23,7 +23,7 @@ export const useCreateProfile = () => {
         variant: "success",
         title: "Successfully created profile",
       })
-      confetti.current?.()
+      confettiPlayer.current("Confetti from left and right")
       // @ts-ignore: TODO: either acquire types from backend, or type them here
       router.replace(`/profile/${response.username}`)
     },

src/v2/components/Confetti.tsx

@@ -61,27 +61,29 @@ const doubleConfetti = (confetti: TCanvasConfettiInstance) => {
   }
 }
 
-const ConfettiContext = createContext<
-  MutableRefObject<TCanvasConfettiInstance | undefined>
->({} as MutableRefObject<TCanvasConfettiInstance | undefined>)
+const ConfettiContext = createContext<MutableRefObject<ConfettiPlayer>>(
+  {} as MutableRefObject<ConfettiPlayer>
+)
 
 export const useConfetti = () => {
-  return { confetti: useContext(ConfettiContext) }
+  return { confettiPlayer: useContext(ConfettiContext) }
 }
 
+type ConfettiType = "Confetti from left and right"
+type ConfettiPlayer = (type: ConfettiType) => void
+
 export const ConfettiProvider = ({ children }: PropsWithChildren) => {
-  const confettiRef = useRef<TCanvasConfettiInstance>()
+  const confettiRef = useRef<ConfettiPlayer>(() => {
+    return
+  })
   const audioRef = useRef<HTMLAudioElement>(null)
   const onInitHandler = ({ confetti }: { confetti: TCanvasConfettiInstance }) => {
-    const confettiClosure = async (...args: Parameters<typeof confetti>) => {
-      if (args[0] === undefined) {
+    const confettiClosure: ConfettiPlayer = (type) => {
+      if (type === "Confetti from left and right") {
         doubleConfetti(confetti)
         audioRef.current?.play()
-        return null
       }
-      return confetti()
     }
-    confettiClosure.reset = confetti.reset
     confettiRef.current = confettiClosure
   }
   return (