feat: add container to StartProfile (#1411)

* feat: add container to StartProfile

* feat: add avatar to form

* feat: add avatar upload and error message

* feat: add confetti effect on create profile

* feat: add sfx to confetti

* feat: add farcaster autofill, fix submit by avatar

* docs: rename credits file

* feat: redirect on profile creation

* chore: replace route instead push

* fix: address farcaster linking

* chore: update zod message

* fix: make avatar size properly image, disable

* fix: align code to suggestions

* feat: reset onboarding if not signed in

next.config.js

@@ -88,6 +88,9 @@ const nextConfig = {
       {
         hostname: "og.link3.to",
       },
+      {
+        hostname: "imagedelivery.net"
+      }
     ],
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
   },

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",

public/sfx/CREDITS.md

@@ -0,0 +1 @@
+"./confetti-party-popper.mp3" : Attribution 4.0 International (CC BY 4.0) - Vilkas Sound 

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

@@ -1,9 +1,12 @@
 "use client"
 
+import { walletSelectorModalAtom } from "@/components/Providers/atoms"
+import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import { Button } from "@/components/ui/Button"
 import { cardClassName } from "@/components/ui/Card"
 import { cn } from "@/lib/utils"
-import { useState } from "react"
+import { useSetAtom } from "jotai"
+import { useEffect, useState } from "react"
 import { SUBSCRIPTIONS } from "../constants"
 import { ChainData, DispatchChainAction, OnboardingChain } from "../types"
 import { ChoosePass } from "./ChoosePass"
@@ -19,7 +22,17 @@ const chains: OnboardingChain[] = [
 ] as const
 
 export const OnboardingDriver = () => {
-  const [chainIndex, setChainIndex] = useState(0)
+  const [chainIndex, setChainIndex] = useState(3)
+  const { address } = useWeb3ConnectionManager()
+  const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)
+
+  useEffect(() => {
+    if (!address) {
+      setChainIndex(0)
+      setIsWalletSelectorModalOpen(true)
+    }
+  }, [address, setIsWalletSelectorModalOpen])
+
   // TODO: remove default chosen subscription, as it is only there for debug
   // purposes
   const [chainData, setChainData] = useState<Partial<ChainData>>({