feat: add confetti effect on create profile

package.json

@@ -98,6 +98,7 @@
     "qrcode.react": "^3.1.0",
     "randombytes": "^2.1.0",
     "react": "^18.2.0",
+    "react-canvas-confetti": "^2.0.7",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",

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

@@ -1,3 +1,4 @@
+import { useConfetti } from "@/components/Confetti"
 import { useToast } from "@/components/ui/hooks/useToast"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import { useRouter } from "next/navigation"
@@ -8,6 +9,7 @@ import { profileSchema } from "../schemas"
 export const useCreateProfile = () => {
   const router = useRouter()
   const { toast } = useToast()
+  const { confetti } = useConfetti()
 
   const createProfile = async (signedValidation: SignedValidation) =>
     fetcher(`/v2/profiles`, {
@@ -21,6 +23,7 @@ export const useCreateProfile = () => {
         variant: "success",
         title: "Successfully created profile",
       })
+      confetti.current?.()
       // router.push(`/profile/${response.username}`)
     },
     onError: (response) => {

src/app/(marketing)/create-profile/layout.tsx

@@ -0,0 +1,8 @@
+import { ConfettiProvider } from "@/components/Confetti"
+import { PropsWithChildren } from "react"
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return <ConfettiProvider>{children}</ConfettiProvider>
+}
+
+export default Layout

src/v2/components/Confetti.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import {
+  MutableRefObject,
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useRef,
+} from "react"
+import ReactCanvasConfetti from "react-canvas-confetti/dist"
+import { TCanvasConfettiInstance } from "react-canvas-confetti/dist/types"
+
+const doubleConfetti = (confetti: TCanvasConfettiInstance) => {
+  const count = 200
+  const defaultsPerBarrage: confetti.Options[] = [
+    {
+      origin: { x: -0.05 },
+      angle: 60,
+    },
+    {
+      origin: { x: 1.05 },
+      angle: 120,
+    },
+  ] as const
+
+  const fire = (particleRatio: number, opts: confetti.Options) => {
+    confetti({
+      ...opts,
+      particleCount: Math.floor(count * particleRatio),
+    })
+  }
+
+  for (const defaults of defaultsPerBarrage) {
+    fire(0.25, {
+      spread: 26,
+      startVelocity: 55,
+      ...defaults,
+    })
+    fire(0.2, {
+      spread: 60,
+      ...defaults,
+    })
+    fire(0.35, {
+      spread: 100,
+      decay: 0.91,
+      scalar: 0.8,
+      ...defaults,
+    })
+    fire(0.1, {
+      spread: 120,
+      startVelocity: 25,
+      decay: 0.92,
+      scalar: 1.2,
+      ...defaults,
+    })
+    fire(0.1, {
+      spread: 120,
+      startVelocity: 45,
+      ...defaults,
+    })
+  }
+}
+
+const ConfettiContext = createContext<
+  MutableRefObject<TCanvasConfettiInstance | undefined>
+>({} as MutableRefObject<TCanvasConfettiInstance | undefined>)
+
+export const useConfetti = () => {
+  return { confetti: useContext(ConfettiContext) }
+}
+
+export const ConfettiProvider = ({ children }: PropsWithChildren) => {
+  const confettiRef = useRef<TCanvasConfettiInstance>()
+  const onInitHandler = ({ confetti }: { confetti: TCanvasConfettiInstance }) => {
+    const confettiClosure = async (...args: Parameters<typeof confetti>) => {
+      if (args[0] === undefined) {
+        doubleConfetti(confetti)
+        return null
+      }
+      return confetti()
+    }
+    confettiClosure.reset = confetti.reset
+    confettiRef.current = confettiClosure
+  }
+  return (
+    <ConfettiContext.Provider value={confettiRef}>
+      {children}
+      <ReactCanvasConfetti
+        onInit={onInitHandler}
+        globalOptions={{
+          disableForReducedMotion: true,
+          useWorker: true,
+          resize: true,
+        }}
+      />
+    </ConfettiContext.Provider>
+  )
+}