diff --git a/web/components/home/new-user-goals.tsx b/web/components/home/new-user-goals.tsx
new file mode 100644
index 0000000000..187118b404
--- /dev/null
+++ b/web/components/home/new-user-goals.tsx
@@ -0,0 +1,177 @@
+import { sumBy, uniqBy } from 'lodash'
+import clsx from 'clsx'
+import { GoGoal } from 'react-icons/go'
+import Link from 'next/link'
+
+import { useLeagueInfo } from 'web/hooks/use-leagues'
+import { formatMoney } from 'common/util/format'
+import { ProgressBar } from 'web/components/progress-bar'
+import { useRemainingNewUserSignupBonuses } from 'web/hooks/use-request-new-user-signup-bonus'
+import { useBets } from 'web/hooks/use-bets-supabase'
+import {
+ DAYS_TO_USE_FREE_QUESTIONS,
+ User,
+ freeQuestionRemaining,
+} from 'common/user'
+import { Col } from '../layout/col'
+import { Row } from '../layout/row'
+import { useSubscription } from 'web/lib/supabase/realtime/use-subscription'
+import { Bet } from 'common/bet'
+import { ReactNode } from 'react'
+import { InfoTooltip } from '../widgets/info-tooltip'
+import { CreateQuestionButton } from '../buttons/create-question-button'
+import { simpleFromNow } from 'web/lib/util/shortenedFromNow'
+import { DAY_MS } from 'common/util/time'
+import { Button } from '../buttons/button'
+
+export const NewUserGoals = (props: { user: User }) => {
+ const { user } = props
+ const remainingViewBonuses = useRemainingNewUserSignupBonuses()
+
+ const bets = useBets({ userId: user.id, limit: 100, order: 'desc' })
+ const { rows } = useSubscription('contract_bets', {
+ k: 'user_id',
+ v: user.id,
+ })
+ const liveBets = rows?.map((r) => r.data as Bet)
+ const combinedBets = uniqBy(
+ [...(bets ?? []), ...(liveBets ?? [])],
+ (b) => b.id
+ )
+ const amountBet = sumBy(combinedBets, (b) => (b.amount > 0 ? b.amount : 0))
+
+ const leagueInfo = useLeagueInfo(user.id)
+ if (remainingViewBonuses === undefined) {
+ return null
+ }
+ if (remainingViewBonuses > 0) {
+ return (
+
+ )
+ }
+
+ if (bets === undefined) {
+ return null
+ }
+
+ const goalAmountBet = 250
+ if (amountBet < goalAmountBet) {
+ return (
+
+ )
+ }
+
+ if (leagueInfo === undefined) {
+ return null
+ }
+
+ const manaEarned = leagueInfo?.mana_earned ?? 0
+ const manaEarnedGoal = 100
+
+ if (manaEarned < manaEarnedGoal) {
+ return (
+
+ mana earned{' '}
+
+ >
+ }
+ >
+
+
+
+
+ )
+ }
+
+ const remaining = freeQuestionRemaining(
+ user?.freeQuestionsCreated,
+ user?.createdTime
+ )
+ const questionsCreated = user.freeQuestionsCreated ?? 0
+ const questionsCreatedGoal = 3
+ if (questionsCreated < questionsCreatedGoal) {
+ return (
+ questions created>}
+ >
+
+ 🎉 You've got {remaining} free questions!
+
+ Expires in{' '}
+ {simpleFromNow(
+ user.createdTime + DAY_MS * DAYS_TO_USE_FREE_QUESTIONS
+ )}
+
+
+
+
+ )
+ }
+ return null
+}
+
+const ProgressDisplay = (props: {
+ label: string
+ value: number
+ goal: number
+ description: ReactNode
+ format?: (value: number) => string
+ children?: ReactNode
+ className?: string
+}) => {
+ const {
+ label,
+ value,
+ goal,
+ description,
+ format = (x: number) => x.toString(),
+ children,
+ className,
+ } = props
+ return (
+
+
+
+
+ {format(value)} of {format(goal)}
+ {' '}
+ {description}
+
+
+
+ {label}
+
+
+
+ {children}
+
+ )
+}
diff --git a/web/pages/home/index.tsx b/web/pages/home/index.tsx
index 095ea75023..0bc5f0cd3b 100644
--- a/web/pages/home/index.tsx
+++ b/web/pages/home/index.tsx
@@ -42,6 +42,7 @@ import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-s
import { User } from 'common/user'
import { YourTopicsSection } from 'web/components/topics/your-topics'
import { useABTest } from 'web/hooks/use-ab-test'
+import { NewUserGoals } from 'web/components/home/new-user-goals'
export async function getStaticProps() {
try {
@@ -134,30 +135,40 @@ export function HomeContent(props: {
`tabs-home`
)
+ const hasAgedOutOfNewUserGoals =
+ (user?.createdTime ?? 0) + DAY_MS * DAYS_TO_USE_FREE_QUESTIONS < Date.now()
+ const newUserGoalsVariant = useABTest('new user goals', [
+ 'enabled',
+ 'disabled',
+ ])
+ const newUserGoalsEnabled =
+ !hasAgedOutOfNewUserGoals && newUserGoalsVariant === 'enabled'
+
return (
- {user && freeQuestionsEnabled && remaining > 0 && (
-
-
-
- 🎉 You've got{' '}
- {remaining} free questions!
-
-
- (Expires in{' '}
- {simpleFromNow(
- user.createdTime + DAY_MS * DAYS_TO_USE_FREE_QUESTIONS
- )}
- .)
-
-
-
-
- )}
+ {user &&
+ !newUserGoalsEnabled &&
+ freeQuestionsEnabled &&
+ remaining > 0 && (
+
+
+ 🎉 You've got {remaining} free questions!
+
+ Expires in{' '}
+ {simpleFromNow(
+ user.createdTime + DAY_MS * DAYS_TO_USE_FREE_QUESTIONS
+ )}
+
+
+
+
+ )}
+
+ {user && newUserGoalsEnabled && }