feat(cr): block allocs in distribution

src/app/collective-rewards/leaderboard/BuilderLeaderBoard.tsx

@@ -1,12 +1,20 @@
+import { BuildersLeaderBoardContent } from '@/app/collective-rewards/leaderboard'
 import { CycleContextProvider } from '@/app/collective-rewards/metrics'
+import { useReadBackersManager } from '@/app/collective-rewards/shared'
 import { Button } from '@/components/Button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/Collapsible'
+import { Popover } from '@/components/Popover'
 import { HeaderTitle } from '@/components/Typography'
-import { BuildersLeaderBoardContent } from '@/app/collective-rewards/leaderboard'
+import { DateTime } from 'luxon'
 import { useRouter } from 'next/navigation'
 
 export const BuildersLeaderBoard = () => {
   const router = useRouter()
+  const { data: isInDistributionPeriod } = useReadBackersManager('onDistributionPeriod')
+  const { data: distributionEndTimestamp } = useReadBackersManager('endDistributionWindow', [
+    BigInt(DateTime.now().toUnixInteger()),
+  ])
+
   const onManageAllocations = () => {
     router.push('/collective-rewards/allocations')
   }
@@ -17,9 +25,25 @@ export const BuildersLeaderBoard = () => {
         <CollapsibleTrigger>
           <div className="flex items-center justify-between w-full">
             <HeaderTitle className="">Rewards leaderboard</HeaderTitle>
-            <Button variant="primary" onClick={onManageAllocations}>
-              Manage Allocations
-            </Button>
+
+            <Popover
+              content={
+                <>
+                  <p>Distribution in progress.</p>
+                  <p>Ends on: {DateTime.fromSeconds(Number(distributionEndTimestamp)).toLocaleString()}</p>
+                </>
+              }
+              trigger="hover"
+              disabled={!isInDistributionPeriod}
+            >
+              <Button
+                variant="primary"
+                onClick={onManageAllocations}
+                disabled={isInDistributionPeriod as boolean}
+              >
+                Manage Allocations
+              </Button>
+            </Popover>
           </div>
         </CollapsibleTrigger>
         <CollapsibleContent>

src/app/collective-rewards/shared/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useReporting'
 export * from './useGaugesGetFunction'
+export * from './useReadBackersManager'

src/app/collective-rewards/shared/hooks/useReadBackersManager.ts

@@ -0,0 +1,37 @@
+import { BackersManagerAbi } from '@/lib/abis/v2/BackersManagerAbi'
+import { AVERAGE_BLOCKTIME } from '@/lib/constants'
+import { BackersManagerAddress } from '@/lib/contracts'
+import { AbiFunction, ContractFunctionArgs } from 'viem'
+import { useReadContract, UseReadContractParameters, UseReadContractReturnType } from 'wagmi'
+
+// TODO: add type narrowing to return only the type related to the functionName
+type FunctionEntry = Extract<(typeof BackersManagerAbi)[number], AbiFunction>
+type ViewFunctionEntry = Extract<
+  FunctionEntry,
+  {
+    stateMutability: 'view'
+  }
+>
+type BackersManagerViewFunction = Exclude<ViewFunctionEntry['name'], 'UPGRADE_INTERFACE_VERSION'>
+type FunctionParams<Name extends ViewFunctionEntry['name'] = BackersManagerViewFunction> =
+  ContractFunctionArgs<typeof BackersManagerAbi, 'view', Name>
+
+type UseReadBackersManager<Name extends ViewFunctionEntry['name'] = BackersManagerViewFunction> =
+  UseReadContractReturnType<typeof BackersManagerAbi, Name>
+
+export const useReadBackersManager = (
+  functionName: BackersManagerViewFunction,
+  functionParams?: FunctionParams<BackersManagerViewFunction>,
+  query?: UseReadContractParameters<typeof BackersManagerAbi, BackersManagerViewFunction>['query'],
+): UseReadBackersManager<BackersManagerViewFunction> => {
+  return useReadContract({
+    functionName,
+    abi: BackersManagerAbi,
+    address: BackersManagerAddress,
+    args: functionParams,
+    query: {
+      refetchInterval: AVERAGE_BLOCKTIME,
+      ...query,
+    },
+  })
+}