change openings reward display

packages/ui/src/app/pages/WorkingGroups/UpcomingOpening.tsx

@@ -17,13 +17,12 @@ import { NumericValueStat } from '@/common/components/statistics/NumericValueSta
 import { TextSmall } from '@/common/components/typography'
 import { ApplicationStatusWrapper } from '@/working-groups/components/ApplicationStatusWrapper'
 import { OpeningIcon } from '@/working-groups/components/OpeningIcon'
-import { useRewardPeriod } from '@/working-groups/hooks/useRewardPeriod'
 import { useUpcomingOpening } from '@/working-groups/hooks/useUpcomingOpening'
+import { asWeeklyRewards } from '@/working-groups/model/asWeeklyRewards'
 
 export const UpcomingOpening = () => {
   const { id } = useParams<{ id: string }>()
   const { isLoading, opening } = useUpcomingOpening(id)
-  const rewardPeriod = useRewardPeriod(opening?.groupId)
 
   if (isLoading || !opening) {
     return (
@@ -82,10 +81,7 @@ export const UpcomingOpening = () => {
                 value={opening.expectedEnding}
                 from={opening.expectedStart}
               />
-              <TokenValueStat
-                title={`Reward per ${rewardPeriod?.toString()} blocks`}
-                value={rewardPeriod?.mul(opening.rewardPerBlock)}
-              />
+              <TokenValueStat title={'Reward per week'} value={asWeeklyRewards(opening.rewardPerBlock)} />
               {opening.hiringLimit ? (
                 <NumericValueStat title="Hiring limit" value={opening.hiringLimit} />
               ) : (

packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx

@@ -35,8 +35,8 @@ import { ApplicationStatusWrapper } from '@/working-groups/components/Applicatio
 import { OpeningIcon } from '@/working-groups/components/OpeningIcon'
 import { MappedStatuses, OpeningStatuses, WorkingGroupsRoutes } from '@/working-groups/constants'
 import { useOpening } from '@/working-groups/hooks/useOpening'
-import { useRewardPeriod } from '@/working-groups/hooks/useRewardPeriod'
 import { ApplyForRoleModalCall } from '@/working-groups/modals/ApplyForRoleModal'
+import { asWeeklyRewards } from '@/working-groups/model/asWeeklyRewards'
 import { urlParamToOpeningId } from '@/working-groups/model/workingGroupName'
 import { WorkingGroupOpening as WorkingGroupOpeningType } from '@/working-groups/types'
 
@@ -62,7 +62,6 @@ export const WorkingGroupOpening = () => {
       return activeApplications.find(({ id }) => id === activeMembership?.id)
     }
   }, [opening?.id, activeMembership?.id])
-  const rewardPeriod = useRewardPeriod(opening?.groupId)
 
   if (isLoading || !opening) {
     return (
@@ -150,10 +149,7 @@ export const WorkingGroupOpening = () => {
             </BadgesRow>
             <StatisticsStyle>
               <DurationStatistics title="Time Left" value={opening.expectedEnding} />
-              <TokenValueStat
-                title={`Reward per ${rewardPeriod?.toString()} blocks`}
-                value={rewardPeriod?.mul(opening.rewardPerBlock)}
-              />
+              <TokenValueStat title={'Reward per week'} value={asWeeklyRewards(opening.rewardPerBlock)} />
               <TokenValueStat
                 title="Minimal stake"
                 tooltipText="Minimum tokens free of rivalrous locks required as application stake to this role."

packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningDetails.tsx

@@ -18,14 +18,13 @@ import {
   OpenedTop,
   OpenedWrapper,
 } from '@/working-groups/components/ToggleableItemStyledComponents'
-import { useRewardPeriod } from '@/working-groups/hooks/useRewardPeriod'
 import { ApplyForRoleModalCall } from '@/working-groups/modals/ApplyForRoleModal'
+import { asWeeklyRewards } from '@/working-groups/model/asWeeklyRewards'
 import { isOpeningOpen } from '@/working-groups/model/isOpeningOpen'
 import { groupNameToURLParam } from '@/working-groups/model/workingGroupName'
 
 export const OpeningDetails = ({ opening, onClick, past }: OpeningListItemProps) => {
   const { showModal } = useModal()
-  const rewardPeriod = useRewardPeriod(opening.groupId)
   const groupName = groupNameToURLParam(nameMapping(opening.groupName))
   const openingRoute = `/working-groups/openings/${groupName}-${opening.runtimeId}`
 
@@ -42,9 +41,9 @@ export const OpeningDetails = ({ opening, onClick, past }: OpeningListItemProps)
         <StatisticsStyle withMargin>
           <StatsBlock size="m" centered>
             <TextBig>
-              <TokenValue value={rewardPeriod?.mul(opening.rewardPerBlock)} />
+              <TokenValue value={asWeeklyRewards(opening.rewardPerBlock)} />
             </TextBig>
-            <Subscription>Reward per {rewardPeriod?.toString()} blocks</Subscription>
+            <Subscription>Reward per week</Subscription>
           </StatsBlock>
           <StatsBlock size="m" centered>
             <MultiColumnsStatistic>

packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningListItem.tsx

@@ -15,7 +15,7 @@ import {
   ToggleableItemWrap,
   OpenItemSummaryColumn,
 } from '@/working-groups/components/ToggleableItemStyledComponents'
-import { useRewardPeriod } from '@/working-groups/hooks/useRewardPeriod'
+import { asWeeklyRewards } from '@/working-groups/model/asWeeklyRewards'
 import { WorkingGroupOpening } from '@/working-groups/types'
 
 export type OpeningListItemProps = {
@@ -25,7 +25,6 @@ export type OpeningListItemProps = {
 }
 
 export const OpeningListItem = ({ opening, past, onClick }: OpeningListItemProps) => {
-  const rewardPeriod = useRewardPeriod(opening.groupId)
   const hiringTarget = opening.hiring.limit || 1
 
   return (
@@ -44,9 +43,9 @@ export const OpeningListItem = ({ opening, past, onClick }: OpeningListItemProps
       <ToggleableItemSummary>
         <OpenItemSummaryColumn>
           <TextInlineBig>
-            <TokenValue value={rewardPeriod?.mul(opening.rewardPerBlock)} />
+            <TokenValue value={asWeeklyRewards(opening.rewardPerBlock)} />
           </TextInlineBig>
-          <ToggleableSubscriptionWide>Reward per {rewardPeriod?.toString()} blocks.</ToggleableSubscriptionWide>
+          <ToggleableSubscriptionWide>Reward per week.</ToggleableSubscriptionWide>
         </OpenItemSummaryColumn>
         <OpenItemSummaryColumn>
           <TextBig>{opening.applicants}</TextBig>

packages/ui/src/working-groups/model/asWeeklyRewards.ts

@@ -0,0 +1,9 @@
+import BN from 'bn.js'
+
+import { A_WEEK } from '@/common/constants'
+import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
+
+export const asWeeklyRewards = (rewardPerBlock: BN) => {
+  const BLOCKS_PER_WEEK = A_WEEK / MILLISECONDS_PER_BLOCK
+  return rewardPerBlock.muln(BLOCKS_PER_WEEK)
+}