Use effects to write referral info

web/lib/firebase/users.ts

@@ -100,7 +100,7 @@ let createUserPromise: Promise<User | null> | undefined = undefined
 const warmUpCreateUser = throttle(createUser, 5000 /* ms */)
 
 export function writeReferralInfo(
-  contractUsername: string,
+  defaultReferrerUsername: string,
   contractId?: string,
   referralUsername?: string,
   groupSlug?: string
@@ -111,7 +111,7 @@ export function writeReferralInfo(
   if (!cachedReferralUser)
     local?.setItem(
       CACHED_REFERRAL_USERNAME_KEY,
-      referralUsername || contractUsername
+      referralUsername || defaultReferrerUsername
     )
 
   // If an explicit referral query is passed, overwrite the cached referral username.

web/pages/[username]/[contractSlug].tsx

@@ -152,12 +152,14 @@ export function ContractPageContent(
   const ogCardProps = getOpenGraphProps(contract)
 
   const router = useRouter()
-  const { referrer, username } = router.query as {
-    username: string
-    referrer?: string
-  }
-  if (!user && router.isReady)
-    writeReferralInfo(username, contract.id, referrer)
+
+  useEffect(() => {
+    const { referrer } = router.query as {
+      referrer?: string
+    }
+    if (!user && router.isReady)
+      writeReferralInfo(contract.creatorUsername, contract.id, referrer)
+  }, [user, contract, router])
 
   const rightSidebar = hasSidePanel ? (
     <Col className="gap-4">

web/pages/group/[...slugs]/index.tsx

@@ -157,6 +157,14 @@ export default function GroupPage(props: {
   }, [group])
 
   const user = useUser()
+  useEffect(() => {
+    const { referrer } = router.query as {
+      referrer?: string
+    }
+    if (!user && router.isReady)
+      writeReferralInfo(creator.username, undefined, referrer, group?.slug)
+  }, [user, creator, group, router])
+
   if (group === null || !groupSubpages.includes(page) || slugs[2]) {
     return <Custom404 />
   }
@@ -164,12 +172,6 @@ export default function GroupPage(props: {
   const isCreator = user && group && user.id === group.creatorId
   const isMember = user && memberIds.includes(user.id)
 
-  const { referrer } = router.query as {
-    referrer?: string
-  }
-  if (!user && router.isReady)
-    writeReferralInfo(creator.username, undefined, referrer, group.slug)
-
   const rightSidebar = (
     <Col className="mt-6 hidden xl:block">
       <JoinOrCreateButton group={group} user={user} isMember={!!isMember} />