Adjust for timezone in rewards month

packages/app/components/MobileButtonRowLayout.tsx

@@ -171,9 +171,12 @@ export const ActivityRewards = ({ children, ...props }: XStackProps) => {
   const { direction } = useScrollDirection()
 
   const isVisible = distribution !== undefined && shareAmount !== undefined && shareAmount > 0
-  const distributionMonth = distribution?.qualification_end.toLocaleString('default', {
-    month: 'long',
-  })
+  const distributionMonth = distribution?.timezone_adjusted_qualification_end.toLocaleString(
+    'default',
+    {
+      month: 'long',
+    }
+  )
 
   const now = new Date()
   const isQualificationOver =

packages/app/features/account/rewards/activity/__snapshots__/screen.test.tsx.snap

@@ -184,13 +184,14 @@ exports[`ActivityRewardsScreen renders: ActivityRewardsScreen 1`] = `
             "marginLeft": 0,
             "marginRight": 0,
             "marginTop": 0,
+            "paddingRight": 7,
             "textTransform": "none",
             "userSelect": "auto",
           }
         }
         suppressHighlighting={true}
       >
-        1,721,001,600,000 Rewards
+        July Rewards
       </Text>
       <View
         aria-autocomplete="none"
@@ -264,7 +265,7 @@ exports[`ActivityRewardsScreen renders: ActivityRewardsScreen 1`] = `
           suppressHighlighting={true}
           testID="SelectDistributionDateValue"
         >
-          1,721,001,600,000 1,721,001,600,000
+          July 2024
         </Text>
         <View
           pointerEvents="none"
@@ -859,7 +860,7 @@ exports[`ActivityRewardsScreen renders: ActivityRewardsScreen 1`] = `
           }
           suppressHighlighting={true}
         >
-          Estimated 1,721,001,600,000 Rewards
+          Estimated July
         </Text>
         <View
           style={
@@ -1229,7 +1230,7 @@ exports[`ActivityRewardsScreen renders: ActivityRewardsScreen 1`] = `
                     }
                     suppressHighlighting={true}
                   >
-                    1,721,001,600,000 1,721,001,600,000
+                    July 2024
                   </Text>
                   <RNSVGSvgView
                     align="xMidYMid"

packages/app/features/account/rewards/activity/screen.test.tsx

@@ -8,7 +8,8 @@ jest.mock('app/utils/distributions', () => ({
       {
         number: 7,
         chain_id: 845337,
-        qualification_end: Date.UTC(2024, 6, 15),
+        qualification_end: new Date(Date.UTC(2024, 6, 30, 11, 59, 59)),
+        timezone_adjusted_qualification_end: new Date(Date.UTC(2024, 6, 30, 11, 59, 59)),
         distribution_shares: [
           {
             amount: 1,

packages/app/features/account/rewards/activity/screen.tsx

@@ -77,9 +77,9 @@ export function ActivityRewardsScreen() {
 
   const distributionDates = distributions.map(
     (d) =>
-      `${d.qualification_end.toLocaleString('default', {
+      `${d.timezone_adjusted_qualification_end.toLocaleString('default', {
         month: 'long',
-      })} ${d.qualification_end.toLocaleString('default', { year: 'numeric' })}`
+      })} ${d.timezone_adjusted_qualification_end.toLocaleString('default', { year: 'numeric' })}`
   )
 
   const onValueChange = (value: string) => {
@@ -94,7 +94,7 @@ export function ActivityRewardsScreen() {
     <YStack f={1} pb={'$12'} pt={'$6'} $gtLg={{ pt: '$0' }} gap={'$7'}>
       <Header />
       <XStack w={'100%'} jc={'space-between'} ai={'center'}>
-        <H3 fontWeight={'600'} color={'$color12'}>
+        <H3 fontWeight={'600'} color={'$color12'} pr={'$2'}>
           {`${distributionDates[selectedDistributionIndex]?.split(' ')[0]} Rewards`}
         </H3>
         <Select
@@ -510,16 +510,17 @@ const ClaimableRewardsCard = ({
   const now = new Date()
   const isQualificationOver = distribution.qualification_end < now
 
-  const distributionMonth = distribution.qualification_end.toLocaleString('default', {
-    month: 'long',
-  })
+  const distributionMonth = distribution.timezone_adjusted_qualification_end.toLocaleString(
+    'default',
+    {
+      month: 'long',
+    }
+  )
 
   return (
     <YStack f={1} w={'100%'} gap="$5" $lg={{ display: 'none' }}>
       <H3 fontWeight={'600'} color={'$color12'}>
-        {isQualificationOver
-          ? `Total ${distributionMonth} Rewards`
-          : `Estimated ${distributionMonth} Rewards`}
+        {isQualificationOver ? `Total ${distributionMonth}` : `Estimated ${distributionMonth}`}
       </H3>
       <Card br={'$6'} p="$7" ai={'center'} w={'100%'}>
         <Stack ai="center" jc="space-between" fd="row" w="100%">

packages/app/utils/dateHelper.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals'
-import { CommentsTime } from './dateHelper'
+import { adjustUTCDateForTimezone, CommentsTime } from './dateHelper'
 describe('CommentsTime', () => {
   beforeAll(() => {
     jest.useFakeTimers()
@@ -27,3 +27,25 @@ describe('CommentsTime', () => {
     expect(CommentsTime(dateObj.toString())).toBe('1 year ago')
   })
 })
+
+describe('adjustUTCDateForTimezone', () => {
+  // UTC+1
+  const baseDate = new Date(1688137919000 + 60 * 60 * 1000)
+
+  beforeAll(() => {
+    jest.useFakeTimers()
+    jest.setSystemTime(baseDate)
+  })
+
+  afterAll(() => {
+    jest.useRealTimers()
+  })
+
+  it('should correctly adjust time for UTC+1 timezone', () => {
+    const result = adjustUTCDateForTimezone(baseDate, 60)
+
+    expect(result).toBeInstanceOf(Date)
+
+    expect(result.getTime()).toBe(baseDate.getTime())
+  })
+})

packages/app/utils/dateHelper.ts

@@ -27,3 +27,22 @@ export const CommentsTime = (dateString: string) => {
   }
   return `${secondsAgo} sec ago`
 }
+
+export const adjustUTCDateForTimezone = (date: Date, offset?: number) => {
+  const adjustedDate = date
+
+  // Get the timezone offset in minutes
+  const timezoneOffset = offset ?? adjustedDate.getTimezoneOffset()
+
+  // Add the timezone offset to the date
+  adjustedDate.setMinutes(adjustedDate.getMinutes() + timezoneOffset)
+
+  // Check if the adjusted date is in the next month
+  if (adjustedDate.getUTCMonth() !== date.getUTCMonth()) {
+    // If so, set it back to the last day of the original month
+    // 0 day doesn't exist so it will roll back to the last day of the previous month
+    adjustedDate.setUTCDate(0)
+  }
+
+  return adjustedDate
+}

packages/app/utils/distributions.ts

@@ -15,6 +15,7 @@ import { useSupabase } from 'app/utils/supabase/useSupabase'
 import { useBalance, useSimulateContract } from 'wagmi'
 import { api } from './api'
 import { useSendAccount } from './send-accounts'
+import { adjustUTCDateForTimezone } from './dateHelper'
 
 export const DISTRIBUTION_INITIAL_POOL_AMOUNT = BigInt(20e9)
 
@@ -25,6 +26,7 @@ type UseDistributionResultDistribution = Omit<
 
 export type UseDistributionsResultData = (UseDistributionResultDistribution & {
   qualification_end: Date
+  timezone_adjusted_qualification_end: Date
   qualification_start: Date
   claim_end: Date
   distribution_shares: Tables<'distribution_shares'>[]
@@ -48,6 +50,9 @@ export const useDistributions = (): UseQueryResult<UseDistributionsResultData, P
       return data.map((distribution) => ({
         ...distribution,
         qualification_end: new Date(distribution.qualification_end),
+        timezone_adjusted_qualification_end: adjustUTCDateForTimezone(
+          new Date(distribution.qualification_end)
+        ),
         qualification_start: new Date(distribution.qualification_start),
         claim_end: new Date(distribution.claim_end),
       }))
@@ -80,6 +85,9 @@ export const useMonthlyDistributions = () => {
       return data.map((distribution) => ({
         ...distribution,
         qualification_end: new Date(distribution.qualification_end),
+        timezone_adjusted_qualification_end: adjustUTCDateForTimezone(
+          new Date(distribution.qualification_end)
+        ),
         qualification_start: new Date(distribution.qualification_start),
         claim_end: new Date(distribution.claim_end),
       }))