Betting streak reset indicator

web/components/profile/betting-streak-modal.tsx

@@ -3,19 +3,44 @@ import { Col } from 'web/components/layout/col'
 import {
   BETTING_STREAK_BONUS_AMOUNT,
   BETTING_STREAK_BONUS_MAX,
+  BETTING_STREAK_RESET_HOUR,
 } from 'common/economy'
 import { formatMoney } from 'common/util/format'
+import { User } from 'common/user'
+import dayjs from 'dayjs'
+import clsx from 'clsx'
 
 export function BettingStreakModal(props: {
   isOpen: boolean
   setOpen: (open: boolean) => void
+  currentUser?: User | null
 }) {
-  const { isOpen, setOpen } = props
+  const { isOpen, setOpen, currentUser } = props
+  const missingStreak = currentUser && !hasCompletedStreakToday(currentUser)
 
   return (
     <Modal open={isOpen} setOpen={setOpen}>
       <Col className="items-center gap-4 rounded-md bg-white px-8 py-6">
-        <span className={'text-8xl'}>🔥</span>
+        <span
+          className={clsx(
+            'text-8xl',
+            missingStreak ? 'grayscale' : 'grayscale-0'
+          )}
+        >
+          🔥
+        </span>
+        {missingStreak && (
+          <Col className={' gap-2 text-center'}>
+            <span className={'font-bold'}>
+              You haven't predicted yet today!
+            </span>
+            <span className={'ml-2'}>
+              If the fire icon is gray, this means you haven't predicted yet
+              today to get your streak bonus. Get out there and make a
+              prediction!
+            </span>
+          </Col>
+        )}
         <span className="text-xl">Daily prediction streaks</span>
         <Col className={'gap-2'}>
           <span className={'text-indigo-700'}>• What are they?</span>
@@ -37,3 +62,17 @@ export function BettingStreakModal(props: {
     </Modal>
   )
 }
+
+export function hasCompletedStreakToday(user: User) {
+  const now = dayjs().utc()
+  const utcTodayAtResetHour = now
+    .hour(BETTING_STREAK_RESET_HOUR)
+    .minute(0)
+    .second(0)
+  const utcYesterdayAtResetHour = utcTodayAtResetHour.subtract(1, 'day')
+  let resetTime = utcTodayAtResetHour.valueOf()
+  if (now.isBefore(utcTodayAtResetHour)) {
+    resetTime = utcYesterdayAtResetHour.valueOf()
+  }
+  return (user?.lastBetTime ?? 0) > resetTime
+}

web/components/user-page.tsx

@@ -28,7 +28,10 @@ import { ReferralsButton } from 'web/components/referrals-button'
 import { formatMoney } from 'common/util/format'
 import { ShareIconButton } from 'web/components/share-icon-button'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { BettingStreakModal } from 'web/components/profile/betting-streak-modal'
+import {
+  BettingStreakModal,
+  hasCompletedStreakToday,
+} from 'web/components/profile/betting-streak-modal'
 import { REFERRAL_AMOUNT } from 'common/economy'
 import { LoansModal } from './profile/loans-modal'
 import { UserLikesButton } from 'web/components/profile/user-likes-button'
@@ -83,6 +86,7 @@ export function UserPage(props: { user: User }) {
       <BettingStreakModal
         isOpen={showBettingStreakModal}
         setOpen={setShowBettingStreakModal}
+        currentUser={currentUser}
       />
       {showLoansModal && (
         <LoansModal isOpen={showLoansModal} setOpen={setShowLoansModal} />
@@ -139,7 +143,12 @@ export function UserPage(props: { user: User }) {
                 <span>profit</span>
               </Col>
               <Col
-                className={'cursor-pointer items-center text-gray-500'}
+                className={clsx(
+                  'cursor-pointer items-center text-gray-500',
+                  isCurrentUser && !hasCompletedStreakToday(user)
+                    ? 'grayscale'
+                    : 'grayscale-0'
+                )}
                 onClick={() => setShowBettingStreakModal(true)}
               >
                 <span>🔥 {user.currentBettingStreak ?? 0}</span>