chore: review allocations

.env.testnet.local

@@ -17,12 +17,13 @@ NEXT_PUBLIC_GENERAL_BUCKET_ADDRESS=0x72Ed7d7b7835Ad62B1f9b6280bAd62618aA71461
 NEXT_PUBLIC_CHAIN_ID=31
 
 # CR-related env variables
-NEXT_PUBLIC_SIMPLIFIED_REWARD_DISTRIBUTOR_ADDRESS=0x4e84FCc953dE129C6C47c5B0AD7E57B226093Ae1
-NEXT_PUBLIC_BACKERS_MANAGER_ADDRESS=0x6E587f9DdEB9640713a0D735A78ac36cA4a763ea
-NEXT_PUBLIC_REWARD_DISTRIBUTOR_ADDRESS=0x6F6Be08782bc671041cF240f84a5Ca671774BECc
-NEXT_PUBLIC_GOVERNANCE_MANAGER_ADDRESS=0x732C2468163F16Dfc109bb68a5F87CC04bC729EF
+# TODO: To be removed 
+NEXT_PUBLIC_SIMPLIFIED_REWARD_DISTRIBUTOR_ADDRESS=0xc469Cc2579De5C16210e9063B4E628bF8C46bA02
 
-NEXT_PUBLIC_CYCLE_DURATION_IN_DAYS=2
+NEXT_PUBLIC_BACKERS_MANAGER_ADDRESS=0xec0a29Df5180A6B04496dfAf2D827e36F4a0A52F
+NEXT_PUBLIC_REWARD_DISTRIBUTOR_ADDRESS=0xD476E4804551595687C1f6F0a9C22dd1Bbfa0319
+NEXT_PUBLIC_GOVERNANCE_MANAGER_ADDRESS=0xb7C6918d6aE6df2e147FF464271a94EAfF027E5D
+NEXT_PUBLIC_CYCLE_DURATION_IN_DAYS=7
 NEXT_PUBLIC_FIRST_CYCLE_START_DATE_ISO="1970-01-01T00:00:00Z"
 
 NEXT_PUBLIC_ENV_DATA_URL="https://raw.githubusercontent.com/RootstockCollective/dao-frontend/develop/data.testnet.qa.json"

src/app/collective-rewards/allocations/components/AllocationAmount.tsx

@@ -33,7 +33,7 @@ export const AllocationAmount = () => {
     const newTotalAllocation = (BigInt(balance ?? 0n) * BigInt(percentage)) / BigInt(100)
     updateTotalAllocation(newTotalAllocation)
     setActiveButton(index)
-    const allocationValue = newTotalAllocation / BigInt(allocationCount)
+    const allocationValue = allocationCount > 0 ? newTotalAllocation / BigInt(allocationCount) : 0n
 
     updateAllocations(Array(allocationCount).fill(allocationValue))
   }

src/app/collective-rewards/allocations/components/BuilderAllocation.tsx

@@ -1,14 +1,14 @@
+import { AllocationsContext } from '@/app/collective-rewards/allocations/context'
+import { Builder } from '@/app/collective-rewards/types'
 import { Input } from '@/components/Input'
 import { Slider } from '@/components/Slider'
 import { Label } from '@/components/Typography'
 import { useContext } from 'react'
 import { formatEther, parseEther } from 'viem'
-import { AllocationsContext } from '@/app/collective-rewards/allocations/context'
 import { BuilderAllocationHeader, BuilderAllocationHeaderProps } from './BuilderAllocationHeader'
-import { BuilderInfo } from '@/app/collective-rewards/types'
 
 export type BuilderAllocationProps = BuilderAllocationHeaderProps &
-  Pick<BuilderInfo, 'kickback'> & {
+  Pick<Builder, 'kickback'> & {
     index: number
     currentAllocation: bigint
   }
@@ -26,8 +26,12 @@ export const BuilderAllocation = (builder: BuilderAllocationProps) => {
     updateAllocation(builder.index, parseEther(value))
   }
 
+  const onSliderValueChange = (value: number[]) => {
+    updateAllocation(builder.index, BigInt(value[0]))
+  }
+
   return (
-    <div className="flex flex-col py-4 px-2 gap-6 shrink-0 bg-foreground min-w-[calc(25%-1rem)] max-w-[calc(25%-1rem)]">
+    <div className="flex flex-col py-4 px-2 gap-6 shrink-0 bg-foreground min-w-[calc(25%-1rem)] max-w-[calc(25%-1rem)] rounded-[8px]">
       <BuilderAllocationHeader {...builder} />
       <Label className="font-bold">Backer rewards {kickback}% </Label>
       <Input
@@ -37,7 +41,11 @@ export const BuilderAllocation = (builder: BuilderAllocationProps) => {
         onChange={onInputChange}
         value={formatEther(currentAllocation)}
       />
-      <Slider value={[(Number(currentAllocation) / Number(totalAllocation)) * 100]} />
+      <Slider
+        value={[Number(currentAllocation)]}
+        max={Number(totalAllocation)}
+        onValueChange={onSliderValueChange}
+      />
     </div>
   )
 }

src/app/collective-rewards/allocations/components/BuilderAllocationHeader.tsx

@@ -1,15 +1,12 @@
+import { Builder, BuilderStatusActive, BuilderStatusShown } from '@/app/collective-rewards/types'
+import { crStatusColorClasses } from '@/app/collective-rewards/user'
 import { AddressOrAlias } from '@/components/Address'
 import { Badge } from '@/components/Badge'
 import { Jdenticon } from '@/components/Header/Jdenticon'
 import { Paragraph, Typography } from '@/components/Typography'
-import { BuilderInfo, BuilderStatusActive, BuilderStatusShown } from '@/app/collective-rewards/types'
-import { crStatusColorClasses } from '@/app/collective-rewards/user'
 import { FC } from 'react'
 
-export type BuilderAllocationHeaderProps = Pick<
-  BuilderInfo,
-  'address' | 'builderName' | 'status' | 'joiningDate'
->
+export type BuilderAllocationHeaderProps = Pick<Builder, 'address' | 'builderName' | 'status' | 'joiningDate'>
 
 export const BuilderAllocationHeader: FC<BuilderAllocationHeaderProps> = ({
   address,

src/app/collective-rewards/allocations/context/AllocationsContext.tsx

@@ -3,8 +3,8 @@ import {
   useGetAllAllocationOf,
   useGetVotingPower,
 } from '@/app/collective-rewards/allocations/hooks'
-import { BuilderInfo } from '@/app/collective-rewards/types'
-import { useGetBuilders } from '@/app/collective-rewards/user'
+import { Builder, BuilderInfo } from '@/app/collective-rewards/types'
+import { useBuilderContext, useGetBuilders } from '@/app/collective-rewards/user'
 import { createContext, FC, ReactNode, useEffect, useMemo, useState } from 'react'
 import { zeroAddress } from 'viem'
 import { useAccount } from 'wagmi'
@@ -25,7 +25,7 @@ type AllocationsContextValue = {
   backer: Backer
   isContextLoading: boolean
   contextError: Error | null
-  getBuilder: (index: number) => BuilderInfo | null
+  getBuilder: (index: number) => Builder | null
 }
 
 export type AllocationsActions = {
@@ -101,7 +101,24 @@ export const AllocationsContextProvider: FC<{ children: ReactNode }> = ({ childr
 
   const [backer, setBacker] = useState<Backer>(DEFAULT_CONTEXT.state.backer)
 
-  const { data: builders, isLoading: isLoadingBuilders, error: buildersError } = useGetBuilders()
+  // TODO: review this part
+  const {
+    data: buildersFromContext,
+    isLoading: isLoadingBuilders,
+    error: buildersError,
+  } = useBuilderContext()
+  const builders = buildersFromContext.map<Builder>(
+    ({ builderName, status, address, gauge, joiningDate }) =>
+      ({
+        builderName,
+        status,
+        address,
+        gauge,
+        joiningDate,
+        // TODO: retrieve the kickback
+        kickback: 0,
+      }) as Builder,
+  )
 
   const {
     data: allAllocations,
@@ -174,8 +191,8 @@ export const AllocationsContextProvider: FC<{ children: ReactNode }> = ({ childr
       }
     }
 
-    const [initialAllocations, initialCummulativeAllocations] = createInitialAllocations(
-      allAllocations,
+    const [initialAllocations, initialCumulativeAllocations] = createInitialAllocations(
+      allAllocations || [],
       selections,
     )
 
@@ -184,7 +201,7 @@ export const AllocationsContextProvider: FC<{ children: ReactNode }> = ({ childr
         balance: votingPower ?? BigInt(0),
         totalAllocation: totalAllocation ?? BigInt(0),
         allocationCount: builders.length,
-        cumulativeAllocation: initialCummulativeAllocations,
+        cumulativeAllocation: initialCumulativeAllocations,
       },
       allocations: initialAllocations,
     }

src/app/collective-rewards/allocations/hooks/useBackerTotalAllocation.ts

@@ -2,7 +2,7 @@ import { BackersManagerAbi } from '@/lib/abis/v2/BackersManagerAbi'
 import { GaugeAbi } from '@/lib/abis/v2/GaugeAbi'
 import { AVERAGE_BLOCKTIME } from '@/lib/constants'
 import { BackersManagerAddress } from '@/lib/contracts'
-import { Address, parseEther } from 'viem'
+import { Address } from 'viem'
 import { useReadContract, useReadContracts } from 'wagmi'
 
 export const useBackerTotalAllocation = (backer: Address) => {
@@ -18,49 +18,28 @@ export const useBackerTotalAllocation = (backer: Address) => {
   })
 
   return {
-    data: parseEther('200'),
+    data,
     isLoading,
     error,
   }
 }
 
-// TODO: UNCOMMENT
-// export const useGetAllAllocationOf = (backer: Address, gauges: Address[]) => {
-//   const { data, isLoading, error } = useReadContracts({
-//     contracts: gauges.map(gauge => ({
-//       abi: GaugeAbi,
-//       address: gauge,
-//       functionName: 'allocationOf',
-//       args: [backer],
-//     })),
-//     query: {
-//       refetchInterval: AVERAGE_BLOCKTIME,
-//     },
-//   })
-
-//   return {
-//     data: data?.map(({ result }) => result as bigint),
-//     isLoading,
-//     error,
-//   }
-// }
-
-// TODO: DELETE
-const data = [
-  BigInt('100000000000000000000'), // 100 ETH equivalent for builder 1
-  BigInt('200000000000000000000'), // 200 ETH equivalent for builder 2
-  BigInt('15000000000000000000'), // 15 ETH equivalent for builder 3
-  BigInt('30000000000000000000'), // 30 ETH equivalent for builder 4
-  BigInt('250000000000000000000'), // 250 ETH equivalent for builder 5
-  BigInt('180000000000000000000'), // 180 ETH equivalent for builder 6
-  BigInt('22000000000000000000'), // 22 ETH equivalent for builder 7
-  BigInt('27000000000000000000'), // 27 ETH equivalent for builder 8
-]
-
 export const useGetAllAllocationOf = (backer: Address, gauges: Address[]) => {
+  const { data, isLoading, error } = useReadContracts({
+    contracts: gauges.map(gauge => ({
+      abi: GaugeAbi,
+      address: gauge,
+      functionName: 'allocationOf',
+      args: [backer],
+    })),
+    query: {
+      refetchInterval: AVERAGE_BLOCKTIME,
+    },
+  })
+
   return {
-    data,
-    isLoading: false,
-    error: null,
+    data: data?.map(({ result }) => result as bigint),
+    isLoading,
+    error,
   }
 }

src/app/collective-rewards/allocations/page.tsx

@@ -5,6 +5,7 @@ import { MainContainer } from '@/components/MainContainer/MainContainer'
 import { Typography } from '@/components/Typography'
 import { useRouter } from 'next/navigation'
 import { useContext } from 'react'
+import { Builder } from '../types'
 import {
   AllocationAmount,
   AllocationMetrics,
@@ -13,7 +14,6 @@ import {
   Header,
 } from './components'
 import { AllocationsContext } from './context'
-import { BuilderInfo } from '../types'
 
 export default function Allocations() {
   const router = useRouter()
@@ -48,7 +48,7 @@ export default function Allocations() {
           <div className="flex items-start content-start flex-wrap gap-4">
             {Object.entries(allocations).map(([key, currentAllocation]) => {
               const index = Number(key)
-              const builderInfo = getBuilder(index) as BuilderInfo
+              const builderInfo = getBuilder(index) as Builder
               const builder: BuilderAllocationProps = {
                 ...builderInfo,
                 index,
@@ -59,6 +59,7 @@ export default function Allocations() {
           </div>
           <div className="flex items-center self-stretch justify-between gap-4">
             <div className="flex gap-4">
+              {/* TODO: review disabled statuses */}
               <Button variant="primary" onClick={() => saveAllocations()}>
                 {' '}
                 Save allocations
@@ -69,7 +70,11 @@ export default function Allocations() {
               </Button>
             </div>
 
-            <Button variant="borderless" onClick={() => resetAllocations()}>
+            <Button
+              variant="borderless"
+              onClick={() => resetAllocations()}
+              textClassName="font-bold text-[18px] text-primary"
+            >
               {' '}
               Reset allocations
             </Button>

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

@@ -21,6 +21,7 @@ import {
 } from '@/app/collective-rewards/shared'
 import { getAddress } from 'viem'
 import { tokenContracts } from '@/lib/contracts'
+import { useRouter } from 'next/navigation'
 
 enum RewardsColumnKeyEnum {
   builder = 'builder',
@@ -174,9 +175,10 @@ const BuildersLeaderBoardTable: FC<BuildersLeaderBoardTableProps> = ({ tokens, c
 }
 
 export const BuildersLeaderBoard = () => {
+  const router = useRouter()
+
   const onManageAllocations = () => {
-    // TODO: fill the allocation context if necessary and change the route
-    console.log('Manage allocations')
+    router.push('collective-rewards/allocations')
   }
 
   // TODO: check where to store this information

src/app/collective-rewards/page.tsx

@@ -4,7 +4,6 @@ import { BuildersLeaderBoard } from '@/app/collective-rewards/leaderboard'
 import { Metrics } from '@/app/collective-rewards/metrics'
 import { WhitelistContextProviderWithBuilders, WhitelistSection } from '@/app/collective-rewards/whitelist'
 import { MainContainer } from '@/components/MainContainer/MainContainer'
-import { AllocationsContextProvider } from './allocations'
 
 export default function BuildersIncentiveMarket() {
   return (

src/app/collective-rewards/rewards/MyRewards.tsx

@@ -48,7 +48,7 @@ export const Rewards: FC<{ builder: Address }> = ({ builder }) => {
       <RewardsSection>
         <RewardsSectionHeader
           onSettingsOpen={() => {
-            console.error('Not implemented')
+            router.push('/collective-rewards/allocations')
           }}
           title="Backer Rewards"
           subtext="Monitor your rewards balances and claim."

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

@@ -1,2 +1,3 @@
 export * from './Pagination'
 export * from './PaginationButton'
+export * from './Table'

src/app/collective-rewards/types.ts

@@ -23,6 +23,13 @@ export type BuilderInfo = {
   status: BuilderStatus
   proposals: CreateBuilderProposalEventLog[]
   gauge: Address
+}
+
+// TODO: refactor BuilderInfo & BuilderProposal
+export type Builder = {
+  address: Address
+  status: BuilderStatus
+  gauge: Address
   kickback: number
   builderName: string
   joiningDate: string

src/app/collective-rewards/user/components/Button/BecomeABuilderButton.test.tsx

@@ -45,9 +45,6 @@ describe('BecomeABuilderButton', () => {
       },
     ] as CreateBuilderProposalEventLog[],
     gauge: '0x01',
-    kickback: 0,
-    builderName: '',
-    joiningDate: '',
   }
   const buildersData = [builderData]
   const proposalsToStates = {

src/app/collective-rewards/user/context/BuilderContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, FC, ReactNode, useContext, useMemo } from 'react'
 import { Address } from 'viem'
 import {
+  BuilderInfo,
   BuilderStatus,
   BuilderStatusProposalCreatedMVP,
   BuilderStatusShown,
@@ -12,7 +13,7 @@ import { DateTime } from 'luxon'
 import { splitCombinedName } from '@/app/proposals/shared/utils'
 import { withPricesContextProvider } from '@/shared/context/PricesContext'
 
-// TODO: rename BuilderProposal and perhaps rewrite the type to Modify<BuildeInfo, {proposal: ParsedProposal}>
+// TODO: rename BuilderProposal and perhaps rewrite the type to Modify<BuilderInfo, {proposal: ParsedProposal}>
 export type BuilderProposal = {
   builderName: string
   status: BuilderStatusShown
@@ -58,8 +59,7 @@ export const BuilderContextProvider: FC<BuilderProviderProps> = ({ children }) =
     error: proposalsStateMapError,
   } = useGetProposalsState(buildersProposals)
 
-  // FIXME: rename to builderdsWithProposals
-  const filteredBuilders = useMemo(() => {
+  const builderWithProposal = useMemo(() => {
     return builders.reduce<ProposalByBuilder>((acc, builder) => {
       const { status, address, gauge } = builder
       const proposal = getMostAdvancedProposal(builder, proposalsStateMap)
@@ -92,11 +92,11 @@ export const BuilderContextProvider: FC<BuilderProviderProps> = ({ children }) =
   const error = buildersError ?? proposalsStateMapError
 
   const getBuilderByAddress = (address: Address): BuilderProposal | undefined => {
-    return filteredBuilders[address]
+    return builderWithProposal[address]
   }
 
   const valueOfContext: BuilderContextValue = {
-    data: Object.values(filteredBuilders),
+    data: Object.values(builderWithProposal),
     isLoading,
     error,
     getBuilderByAddress,