From a8e8d9db27d4853a4d1ace7d2d8ea08cb12dcba4 Mon Sep 17 00:00:00 2001
From: Juraj Piar <juraj@iovlabs.org>
Date: Wed, 20 Nov 2024 14:34:32 +0000
Subject: [PATCH] back to state

---
 .../components/AllocationAmount.tsx           |  62 ++--
 .../components/AllocationMetrics.tsx          |  49 +--
 .../components/BuilderAllocation.tsx          |  53 +--
 .../components/BuilderAllocationHeader.tsx    |   4 +-
 .../allocations/context/Action.d.ts           |  43 ---
 .../context/AllocationsContext.tsx            | 320 ++++++++++++------
 .../allocations/context/Context.d.ts          |  24 --
 .../allocations/context/reducer.ts            |  51 ---
 .../allocations/hooks/index.ts                |   1 +
 .../hooks/useBackerTotalAllocation.ts         |  52 ++-
 .../allocations/hooks/useGetVotingPower.ts    |  24 ++
 .../collective-rewards/allocations/page.tsx   |  75 +++-
 src/app/collective-rewards/page.tsx           |   1 +
 src/app/collective-rewards/types.ts           |   4 +
 .../user/hooks/useGetBuilders.ts              | 317 +++++++++--------
 src/app/providers/ContextProviders.tsx        |   4 +-
 src/app/user/Balances/balanceUtils.ts         |   7 +-
 17 files changed, 589 insertions(+), 502 deletions(-)
 delete mode 100644 src/app/collective-rewards/allocations/context/Action.d.ts
 delete mode 100644 src/app/collective-rewards/allocations/context/Context.d.ts
 delete mode 100644 src/app/collective-rewards/allocations/context/reducer.ts
 create mode 100644 src/app/collective-rewards/allocations/hooks/useGetVotingPower.ts

diff --git a/src/app/collective-rewards/allocations/components/AllocationAmount.tsx b/src/app/collective-rewards/allocations/components/AllocationAmount.tsx
index a6d84450..c8c95700 100644
--- a/src/app/collective-rewards/allocations/components/AllocationAmount.tsx
+++ b/src/app/collective-rewards/allocations/components/AllocationAmount.tsx
@@ -1,10 +1,13 @@
 'use client'
 
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { Button, ButtonProps } from '@/components/Button'
 import { Input } from '@/components/Input'
 import { cn } from '@/lib/utils'
-import { useState } from 'react'
+import { useContext, useState } from 'react'
+import { AllocationsContext } from '../context'
+import { ethers } from 'ethers'
+import { formatEther, parseEther } from 'viem'
+import { StakeHint } from './StakeHint'
 
 const PercentageButton = ({ children, variant, ...rest }: ButtonProps) => (
   <Button
@@ -19,26 +22,43 @@ const PercentageButton = ({ children, variant, ...rest }: ButtonProps) => (
 type AllocationAmountProps = {
   balance: bigint
   errorMessage?: string
-  onPercentageSet?: (percentage: number) => void
 }
 
-export const AllocationAmount = ({ balance, errorMessage, onPercentageSet }: AllocationAmountProps) => {
-  // TODO: hint is shown only when the allocated amount exceeds the balance
-  // const hint = <StakeHint />
-  const hint = undefined
+const ALLOCATION_EXCEED_AMOUNT_ERROR = 'Builder allocations exceeds amount to allocate'
 
-  const [activeButton, setActiveButton] = useState<number | null>(null)
-  const [allocatedAmount, setAllocatedAmount] = useState('0')
-  const onChange = (value: string) => {
-    setAllocatedAmount(value)
-  }
+export const AllocationAmount = ({ balance }: AllocationAmountProps) => {
+  const {
+    state: {
+      allocations,
+      selections,
+      backer,
+      isContextLoading,
+      contextError,
+      getBuilder,
+      cumulativeAllocation,
+    },
+    actions: {
+      toggleSelectedBuilder,
+      updateAllocation,
+      updateAllocations: updateAllocationAction,
+      updateTotalAllocation,
+    },
+  } = useContext(AllocationsContext)
 
+  const [activeButton, setActiveButton] = useState<number | null>(null)
   const onPercentageButtonClicked = (percentage: number, index: number) => {
-    const percentageAmount = (BigInt(balance ?? 0n) * BigInt(percentage)) / BigInt(100)
-    setAllocatedAmount(formatBalanceToHuman(percentageAmount))
-    onPercentageSet?.(percentage)
+    const totalAllocation = (BigInt(balance ?? 0n) * BigInt(percentage)) / BigInt(100)
+    updateTotalAllocation(totalAllocation)
     setActiveButton(index)
+    const allocationValue = totalAllocation / BigInt(backer.allocationCount)
+
+    updateAllocationAction(Array(backer.allocationCount).fill(allocationValue))
   }
+
+  const handleOnChange = (value: string) => {
+    updateTotalAllocation(parseEther(value))
+  }
+
   return (
     <div className="flex flex-col items-end gap-4 min-w-[694px] min-h-[130px]">
       <div className="flex flex-col items-center gap-[10px] self-stretch">
@@ -49,10 +69,14 @@ export const AllocationAmount = ({ balance, errorMessage, onPercentageSet }: All
           labelProps={{ className: 'text-base leading-4 font-normal' }}
           name="allocated-amount"
           fullWidth
-          onChange={onChange}
-          value={allocatedAmount.toString()}
-          errorMessage={errorMessage}
-          hint={hint}
+          onChange={handleOnChange}
+          value={formatEther(backer.totalAllocation)}
+          errorMessage={
+            cumulativeAllocation > backer.totalAllocation && cumulativeAllocation < backer.balance
+              ? ALLOCATION_EXCEED_AMOUNT_ERROR
+              : ''
+          }
+          hint={Number(backer.totalAllocation - cumulativeAllocation) < 0 ? <StakeHint /> : undefined}
         />
       </div>
       <div className="flex items-center gap-3">
diff --git a/src/app/collective-rewards/allocations/components/AllocationMetrics.tsx b/src/app/collective-rewards/allocations/components/AllocationMetrics.tsx
index 79aafdad..e822680f 100644
--- a/src/app/collective-rewards/allocations/components/AllocationMetrics.tsx
+++ b/src/app/collective-rewards/allocations/components/AllocationMetrics.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { formatBalanceToHuman, getTokenBalance } from '@/app/user/Balances/balanceUtils'
 import { useGetAddressTokens } from '@/app/user/Balances/hooks/useGetAddressTokens'
 import { withSpinner } from '@/components/LoadingSpinner/withLoadingSpinner'
 import { Paragraph } from '@/components/Typography'
@@ -8,6 +7,9 @@ import { ethers } from 'ethers'
 import { useAccount } from 'wagmi'
 import { useHandleErrors } from '../../utils'
 import { useBackerTotalAllocation } from '../hooks/useBackerTotalAllocation'
+import { AllocationsContext } from '../context'
+import { useContext } from 'react'
+import { formatEther } from 'viem'
 
 type ValueProps = {
   value: string
@@ -33,60 +35,39 @@ const Column = ({ children }: { children: React.ReactNode }) => {
 const Balance = ({ value }: ValueProps) => {
   return <Metric name="Balance" value={value} />
 }
-const BalanceWithSpinner = withSpinner(Balance)
 
 const AllocatedAmount = ({ value }: ValueProps) => {
   return <Metric name="Allocated amount" value={value} />
 }
-const AllocatedAmountWithSpinner = withSpinner(AllocatedAmount)
 
 const UnallocatedAmount = ({ value }: ValueProps) => {
   return <Metric name="Unallocated amount" value={value} />
 }
-const UnallocatedAmountWithSpinner = withSpinner(UnallocatedAmount)
 
 export const AllocationMetrics = () => {
-  // TODO: we can move this logic to a custom hook or to a context
-  const { address, chainId } = useAccount()
-  let {
-    data,
-    isLoading: balanceLoading,
-    error: balanceError,
-  } = useGetAddressTokens(address!, chainId as number)
-  const stRIFBalance = getTokenBalance('stRIF', data)
-  const balanceValue = `${stRIFBalance.balance} ${stRIFBalance.symbol}`
-  balanceLoading = false
+  const {
+    initialState: {
+      backer: { totalAllocation, balance },
+    },
+  } = useContext(AllocationsContext)
 
-  let {
-    data: allocatedAmount,
-    isLoading: allocatedAmountLoading,
-    error: allocatedAmountError,
-  } = useBackerTotalAllocation(address!)
-  const allocatedAmountValue = `${allocatedAmount} ${stRIFBalance.symbol}`
-  allocatedAmountLoading = false
-  allocatedAmount = 0n
+  const balanceValue = `${formatEther(balance)} stRIF`
 
-  useHandleErrors({
-    error: balanceError ?? allocatedAmountError,
-    title: 'Failed to fetch balance and allocated amount',
-  })
+  const allocatedAmountValue = `${formatEther(totalAllocation)} stRIF`
 
-  const unformattedUnit = stRIFBalance.balance
-  const formattedUnit = ethers.parseEther(unformattedUnit)
-  const unallocatedAmount = formatBalanceToHuman(formattedUnit - (allocatedAmount || 0n))
+  const unallocatedAmount = formatEther(balance - totalAllocation)
 
-  const unallocatedAmountValue = `${unallocatedAmount} ${stRIFBalance.symbol}`
-  const unallocatedAmountLoading = balanceLoading || allocatedAmountLoading
+  const unallocatedAmountValue = `${unallocatedAmount} stRIF`
   return (
     <div className="flex items-start gap-6 w-full">
       <Column>
-        <BalanceWithSpinner value={balanceValue} isLoading={balanceLoading} />
+        <Balance value={balanceValue} />
       </Column>
       <Column>
-        <AllocatedAmountWithSpinner value={allocatedAmountValue} isLoading={allocatedAmountLoading} />
+        <AllocatedAmount value={allocatedAmountValue} />
       </Column>
       <Column>
-        <UnallocatedAmountWithSpinner value={unallocatedAmountValue} isLoading={unallocatedAmountLoading} />
+        <UnallocatedAmount value={unallocatedAmountValue} />
       </Column>
     </div>
   )
diff --git a/src/app/collective-rewards/allocations/components/BuilderAllocation.tsx b/src/app/collective-rewards/allocations/components/BuilderAllocation.tsx
index 86127b5b..0c37f86e 100644
--- a/src/app/collective-rewards/allocations/components/BuilderAllocation.tsx
+++ b/src/app/collective-rewards/allocations/components/BuilderAllocation.tsx
@@ -1,42 +1,43 @@
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { Input } from '@/components/Input'
 import { Slider } from '@/components/Slider'
 import { Label } from '@/components/Typography'
-import { useState } from 'react'
+import { useContext } from 'react'
+import { formatEther, parseEther } from 'viem'
+import { AllocationsContext } from '../context'
 import { BuilderAllocationHeader, BuilderAllocationHeaderProps } from './BuilderAllocationHeader'
-import { Address } from 'viem'
-import { BuilderStatusShown } from '../../types'
-
-export type BuilderStatus = BuilderStatusShown | 'Paused' | 'Deactivated'
 
 export type BuilderAllocationProps = BuilderAllocationHeaderProps & {
-  allocationLeft: BigInt
-  // TODO: what's the value we expect here? (e.g. 8% or 8.123456%)
-  backerRewards: number
-  currentAllocation: number
+  index: number
+  kickback: number
+  currentAllocation: bigint
 }
 
 export const BuilderAllocation = (builder: BuilderAllocationProps) => {
-  const [sliderValue, setSliderValue] = useState<number>(builder.currentAllocation)
-  /* TODO: when the cumulative amount exceeds the balance
-   * - hint is changed
-   * - Slider is hidden
-   */
-  const hint = `Allocation left ${formatBalanceToHuman(builder.allocationLeft.toString())} stRIF`
-  // const hint = <StakeHint />
-  const onInputChange = () => {
-    /* TODO:
-     *  - reset all the sliders to 0 when the user changes the input
-     *  - update the cumulative amount
-     *  - if the cumulative amount exceeds the total allocation, show an error message in the current input
-     */
+  const {
+    state: {
+      backer: { totalAllocation },
+      cumulativeAllocation,
+    },
+    actions: { updateAllocation },
+  } = useContext(AllocationsContext)
+  const allocationLeft = totalAllocation - cumulativeAllocation
+  const { currentAllocation, kickback, address } = builder
+  const onInputChange = (value: string) => {
+    updateAllocation(builder.index, parseEther(value))
   }
+
   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)]">
       <BuilderAllocationHeader {...builder} />
-      <Label className="font-bold">Backer rewards {builder.backerRewards}% </Label>
-      <Input type="number" name={`allocation-${builder.address}`} hint={hint} onChange={onInputChange} />
-      <Slider value={[sliderValue]} />
+      <Label className="font-bold">Backer rewards {kickback}% </Label>
+      <Input
+        type="number"
+        name={`allocation-${address}`}
+        hint={`Allocation left ${allocationLeft > 0 ? formatEther(allocationLeft) : '0'} stRIF`}
+        onChange={onInputChange}
+        value={formatEther(currentAllocation)}
+      />
+      <Slider value={[(Number(currentAllocation) / Number(totalAllocation)) * 100]} />
     </div>
   )
 }
diff --git a/src/app/collective-rewards/allocations/components/BuilderAllocationHeader.tsx b/src/app/collective-rewards/allocations/components/BuilderAllocationHeader.tsx
index 929b7a0a..1e7f062d 100644
--- a/src/app/collective-rewards/allocations/components/BuilderAllocationHeader.tsx
+++ b/src/app/collective-rewards/allocations/components/BuilderAllocationHeader.tsx
@@ -2,7 +2,7 @@ import { AddressOrAlias } from '@/components/Address'
 import { Badge } from '@/components/Badge'
 import { Jdenticon } from '@/components/Header/Jdenticon'
 import { Paragraph, Typography } from '@/components/Typography'
-import { BuilderStatusActive, BuilderStatusShown } from '../../types'
+import { BuilderStatus, BuilderStatusActive } from '../../types'
 import { crStatusColorClasses } from '../../user'
 import { Address } from 'viem'
 import { FC } from 'react'
@@ -10,7 +10,7 @@ import { FC } from 'react'
 export type BuilderAllocationHeaderProps = {
   address: Address
   builderName: string
-  status: BuilderStatusShown
+  status: BuilderStatus
   joiningDate: string
 }
 
diff --git a/src/app/collective-rewards/allocations/context/Action.d.ts b/src/app/collective-rewards/allocations/context/Action.d.ts
deleted file mode 100644
index dd0e1e1b..00000000
--- a/src/app/collective-rewards/allocations/context/Action.d.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-type Action =
-  | {
-      type: 'TOGGLE_SELECTED_BUILDER'
-      payload: {
-        builderIndex: number
-      }
-    }
-  | {
-      type: 'SET_ALLOCATIONS'
-      payload: {
-        allocations: BuilderAllocations
-      }
-    }
-  | {
-      type: 'UPDATE_ALLOCATION'
-      payload: {
-        builderIndex: number
-        value: number
-      }
-    }
-  | {
-      type: 'UPDATE_CONTEXT_LOADING'
-      payload: {
-        isLoading: boolean
-      }
-    }
-  | {
-      type: 'UPDATE_CONTEXT_ERROR'
-      payload: {
-        error: Error | null
-      }
-    }
-
-export type AllocationActionType = Action['type']
-
-export type AllocationAction<T extends AllocationActionType> = Extract<Action, { type: T }>
-
-export type AllocationActionPayload<T extends AllocationActionType> = AllocationAction<T>['payload']
-
-export type AllocationActionHandler<T extends AllocationActionType> = (
-  state: AllocationState,
-  payload: AllocationActionPayload<T>,
-) => AllocationState
diff --git a/src/app/collective-rewards/allocations/context/AllocationsContext.tsx b/src/app/collective-rewards/allocations/context/AllocationsContext.tsx
index 22be9644..9a6f7bf6 100644
--- a/src/app/collective-rewards/allocations/context/AllocationsContext.tsx
+++ b/src/app/collective-rewards/allocations/context/AllocationsContext.tsx
@@ -1,45 +1,91 @@
-import { useGetAllAllocationOf } from '@/app/collective-rewards/allocations/hooks'
-import { useGetActiveBuilders } from '@/app/collective-rewards/user'
-import { createContext, Dispatch, FC, ReactNode, Reducer, useEffect, useReducer } from 'react'
-import { zeroAddress } from 'viem'
+import {
+  useBackerTotalAllocation,
+  useGetAllAllocationOf,
+  useGetVotingPower,
+} from '@/app/collective-rewards/allocations/hooks'
+import { useGetBuilders } from '@/app/collective-rewards/user'
+import { createContext, FC, ReactNode, useEffect, useMemo, useState } from 'react'
+import { parseEther, zeroAddress } from 'viem'
 import { useAccount } from 'wagmi'
-import { reducer } from './reducer'
-import { AllocationState, BuilderAllocations } from './Context'
-import { AllocationAction, AllocationActionType } from './Action'
+import { BuilderInfo } from '@/app/collective-rewards/types'
 
-export const AllocationsStateContext = createContext<AllocationState | null>(null)
+type Allocations = Record<number, bigint>
 
-export const AllocationsActionsContext = createContext<Dispatch<
-  AllocationAction<AllocationActionType>
-> | null>(null)
+export interface Backer {
+  totalAllocation: bigint
+  balance: bigint
+  allocationCount: number
+}
+
+type AllocationsContextValue = {
+  selections: number[]
+  allocations: Allocations
+  backer: Backer
+  isContextLoading: boolean
+  cumulativeAllocation: bigint
+  contextError: Error | null
+  getBuilder: (index: number) => BuilderInfo
+}
+
+type AllocationsActions = {
+  toggleSelectedBuilder: (builderIndex: number) => void
+  updateAllocation: (builderIndex: number, value: bigint) => void
+  updateAllocations: (values: bigint[]) => void
+  updateTotalAllocation: (value: bigint) => void
+}
+
+type InitialState = Pick<AllocationsContextValue, 'backer' | 'allocations'>
+
+type AllocationsContext = {
+  initialState: InitialState
+  state: AllocationsContextValue
+  actions: AllocationsActions
+}
+export const AllocationsContext = createContext<AllocationsContext>({
+  initialState: {
+    allocations: {},
+    backer: {
+      balance: BigInt(0),
+      totalAllocation: BigInt(0),
+      allocationCount: 0,
+    },
+  },
+  state: {
+    selections: [],
+    allocations: {},
+    cumulativeAllocation: BigInt(0),
+    backer: {
+      balance: BigInt(0),
+      totalAllocation: BigInt(0),
+      allocationCount: 0,
+    },
+    isContextLoading: true,
+    contextError: null,
+    getBuilder: () => ({}) as BuilderInfo,
+  },
+  actions: {
+    toggleSelectedBuilder: () => {},
+    updateAllocation: () => {},
+    updateAllocations: () => {},
+    updateTotalAllocation: () => {},
+  },
+})
 
 export const AllocationsContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const { address: backerAddress } = useAccount()
 
-  const [state, dispatch] = useReducer<Reducer<AllocationState, AllocationAction<AllocationActionType>>>(
-    reducer,
-    {
-      initialState: null,
-      selections: [],
-      allocations: {},
-      user: {
-        address: zeroAddress,
-        totalAllocation: 0n,
-        balance: 0n,
-      },
-      meta: {
-        isLoading: true,
-        error: null,
-      },
-    },
-  )
-  const { allocations, selections, initialState, user, meta } = state
+  const [selections, setSelections] = useState<number[]>([])
+  const [allocations, setAllocations] = useState<Record<number, bigint>>({})
+  const [cumulativeAllocation, setCumulativeAllocation] = useState(BigInt(0))
+  const [isContextLoading, setIsContextLoading] = useState(true)
+  const [contextError, setContextError] = useState<Error | null>(null)
+  const [backer, setBacker] = useState<Backer>({
+    balance: BigInt(0),
+    totalAllocation: BigInt(0),
+    allocationCount: 0,
+  })
 
-  const {
-    data: activeBuilders,
-    isLoading: isLoadingActiveBuilders,
-    error: activeBuildersError,
-  } = useGetActiveBuilders()
+  const { data: builders, isLoading: isLoadingBuilders, error: buildersError } = useGetBuilders()
 
   const {
     data: allAllocations,
@@ -47,14 +93,21 @@ export const AllocationsContextProvider: FC<{ children: ReactNode }> = ({ childr
     error: allAllocationsError,
   } = useGetAllAllocationOf(
     backerAddress ?? zeroAddress,
-    activeBuilders.map(builder => builder.gauge),
+    builders.map(builder => builder.gauge),
   )
 
+  const {
+    data: totalAllocation,
+    isLoading: isTotalAllocationLoading,
+    error: totalAllocationError,
+  } = useBackerTotalAllocation(backerAddress ?? zeroAddress)
+
+  const { data: votingPower, isLoading: isVotingPowerLoading, error: votingPowerError } = useGetVotingPower()
+
   useEffect(() => {
-    dispatch({
-      type: 'UPDATE_CONTEXT_LOADING',
-      payload: { isLoading: true },
-    })
+    if (isContextLoading) {
+      return
+    }
     if (!backerAddress || !allAllocations) {
       return
     }
@@ -63,91 +116,134 @@ export const AllocationsContextProvider: FC<{ children: ReactNode }> = ({ childr
       if (allocation || selections.includes(index)) {
         acc[index] = allocation
       }
+      setCumulativeAllocation(cumulativeAllocation + allocation)
 
       return acc
-    }, {} as BuilderAllocations)
-    dispatch({
-      type: 'SET_ALLOCATIONS',
-      payload: { allocations },
-    })
-    dispatch({
-      type: 'UPDATE_CONTEXT_LOADING',
-      payload: { isLoading: false },
+    }, {} as Allocations)
+    setAllocations(allocations)
+    setBacker({
+      ...backer,
+      allocationCount: builders.length,
     })
-  }, [allAllocations, selections, backerAddress])
+  }, [allAllocations, backerAddress, selections, isContextLoading])
 
   useEffect(() => {
-    if (activeBuildersError || allAllocationsError) {
-      dispatch({
-        type: 'UPDATE_CONTEXT_ERROR',
-        payload: { error: activeBuildersError || allAllocationsError },
+    if (totalAllocation) {
+      setBacker({
+        ...backer,
+        totalAllocation,
       })
     }
-  }, [allAllocationsError, activeBuildersError])
+  }, [totalAllocation])
 
   useEffect(() => {
-    if (isLoadingActiveBuilders || isAllAllocationsLoading) {
-      dispatch({
-        type: 'UPDATE_CONTEXT_LOADING',
-        payload: { isLoading: true },
+    if (votingPower) {
+      setBacker({
+        ...backer,
+        balance: votingPower,
       })
     }
-  }, [isLoadingActiveBuilders, isAllAllocationsLoading])
-
-  // const actions: AllocationsActions = {
-  //   toggleSelectedBuilder: (builderIndex: number) => {
-  //     const selectionIndex = selections.findIndex(selection => selection === builderIndex)
-  //     if (selectionIndex >= 0) {
-  //       return setSelections([
-  //         ...selections.slice(0, selectionIndex),
-  //         ...selections.slice(selectionIndex + 1),
-  //       ])
-  //     }
-
-  //     setSelections([...selections, builderIndex])
-  //   },
-  //   updateAllocation: (builderIndex: number, value: bigint) => {
-  //     if (!activeBuilders[builderIndex]) {
-  //       setContextError(new Error('Builder not found'))
-  //     }
-
-  //     setAllocations({
-  //       ...allocations,
-  //       [builderIndex]: value,
-  //     })
-  //   },
-  // }
-
-  // const displayBuilders = useMemo(() => {
-  //   Object.entries(allocations).map((index, value) => {
-  //     const builder = activeBuilders[index]
-  //     const { status } = builder
-  //     return {
-  //       allocationLeft: 0n,
-  //       backerRewards: 0,
-  //       currentAllocation: 0,
-  //       address: builder.gauge,
-  //       builderName: builder.name,
-  //       status,
-  //       joiningDate,
-  //     }
-  //   })
-  // }, [activeBuilders, selections, allocations])
-
-  // const data: AllocationsContextValue = {
-  //   selections,
-  //   allocations,
-  //   isContextLoading,
-  //   contextError,
-  //   displayBuilders,
-  // }
+  }, [votingPower])
 
+  useEffect(() => {
+    setContextError(buildersError ?? allAllocationsError ?? totalAllocationError ?? votingPowerError)
+  }, [allAllocationsError, buildersError, totalAllocationError, votingPowerError])
+
+  useEffect(() => {
+    setIsContextLoading(
+      isLoadingBuilders || isAllAllocationsLoading || isTotalAllocationLoading || isVotingPowerLoading,
+    )
+  }, [isLoadingBuilders, isAllAllocationsLoading, isTotalAllocationLoading, isVotingPowerLoading])
+
+  const initialState: InitialState = useMemo(() => {
+    if (isContextLoading) {
+      return {
+        backer: {
+          balance: BigInt(0),
+          totalAllocation: BigInt(0),
+          allocationCount: 0,
+        },
+        allocations: {},
+      }
+    }
+
+    const initialAllocations = allAllocations.reduce((acc, allocation, index) => {
+      if (allocation || selections.includes(index)) {
+        acc[index] = allocation
+      }
+      return acc
+    }, {} as Allocations)
+
+    return {
+      backer: {
+        balance: votingPower ?? BigInt(0),
+        totalAllocation: totalAllocation ?? BigInt(0),
+        allocationCount: builders.length,
+      },
+      allocations: initialAllocations,
+    }
+  }, [allAllocations, builders, totalAllocation, votingPower, isContextLoading])
+
+  // TODO: extract actions to a separate file
+  const actions: AllocationsActions = {
+    toggleSelectedBuilder: (builderIndex: number) => {
+      const selectionIndex = selections.findIndex(selection => selection === builderIndex)
+      if (selectionIndex >= 0) {
+        return setSelections(selections.filter(index => index !== selectionIndex))
+      }
+
+      setSelections([...selections, builderIndex])
+    },
+    updateAllocation: (builderIndex: number, value: bigint) => {
+      if (!builders[builderIndex]) {
+        setContextError(new Error('Builder not found'))
+      }
+      const oldValue = allocations[builderIndex]
+      setAllocations({
+        ...allocations,
+        [builderIndex]: value,
+      })
+      setCumulativeAllocation(cumulativeAllocation + value - oldValue)
+    },
+    updateAllocations: (values: bigint[]) => {
+      // TODO: filter out dewhitelisted builders
+      // TODO: refactor to a function and reuse in useEffect
+      let cumulativeAllocation = BigInt(0)
+      setAllocations(
+        values.reduce((acc, value, index) => {
+          acc[index] = value
+          cumulativeAllocation += value
+          return acc
+        }, {} as Allocations),
+      )
+      setCumulativeAllocation(cumulativeAllocation)
+    },
+    updateTotalAllocation: (value: bigint) => {
+      setBacker({
+        ...backer,
+        totalAllocation: value,
+      })
+    },
+  }
+
+  const data: AllocationsContextValue = {
+    selections,
+    allocations,
+    cumulativeAllocation,
+    backer,
+    isContextLoading,
+    contextError,
+    getBuilder: (index: number) => builders[index],
+  }
   return (
-    <AllocationsStateContext.Provider value={state}>
-      <AllocationsActionsContext.Provider value={dispatch}>
-        {children}
-        {}
-      </AllocationsActionsContext.Provider>
-    </AllocationsStateContext.Provider>
+    <AllocationsContext.Provider
+      value={{
+        initialState,
+        state: data,
+        actions,
+      }}
+    >
+      {children}
+    </AllocationsContext.Provider>
   )
 }
diff --git a/src/app/collective-rewards/allocations/context/Context.d.ts b/src/app/collective-rewards/allocations/context/Context.d.ts
deleted file mode 100644
index 4732e539..00000000
--- a/src/app/collective-rewards/allocations/context/Context.d.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Address } from 'viem'
-import { BuilderStatusShown } from '@/app/collective-rewards/types'
-import { AllocationAction } from './Action'
-
-export type BuilderAllocations = Record<number, bigint>
-
-export interface Backer {
-  address: Address
-  totalAllocation: bigint
-  balance: bigint
-}
-
-export interface AllocationState {
-  initialState: AllocationState | null
-  selections: number[]
-  allocations: BuilderAllocations
-  user: Backer
-  meta: ContextState
-}
-
-export interface ContextState {
-  isLoading: boolean
-  error: Error | null
-}
diff --git a/src/app/collective-rewards/allocations/context/reducer.ts b/src/app/collective-rewards/allocations/context/reducer.ts
deleted file mode 100644
index 6000435f..00000000
--- a/src/app/collective-rewards/allocations/context/reducer.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { AllocationAction, AllocationActionHandler, AllocationActionType } from './Action'
-import { AllocationState } from './Context'
-
-export const actionHandlers: {
-  [T in AllocationActionType]: AllocationActionHandler<T>
-} = {
-  TOGGLE_SELECTED_BUILDER: (state, { builderIndex }) => {
-    return {
-      ...state,
-      selections: state.selections.includes(builderIndex)
-        ? state.selections.filter((selection: number) => selection !== builderIndex)
-        : [...state.selections, builderIndex],
-    }
-  },
-  SET_ALLOCATIONS: (state, { allocations }) => {
-    return {
-      ...state,
-      allocations,
-    }
-  },
-  UPDATE_ALLOCATION: (state, { builderIndex, value }) => {
-    return {
-      ...state,
-      allocations: {
-        ...state.allocations,
-        [builderIndex]: value,
-      },
-    }
-  },
-  UPDATE_CONTEXT_LOADING: (state, { isLoading }) => {
-    return {
-      ...state,
-      isContextLoading: isLoading,
-    }
-  },
-  UPDATE_CONTEXT_ERROR: (state, { error }) => {
-    return {
-      ...state,
-      contextError: error,
-    }
-  },
-}
-
-export function reducer<T extends AllocationActionType>(
-  state: AllocationState,
-  { type, payload }: AllocationAction<T>,
-): AllocationState {
-  const handler = actionHandlers[type] as AllocationActionHandler<any> // FIXME: fix type
-
-  return handler(state, payload)
-}
diff --git a/src/app/collective-rewards/allocations/hooks/index.ts b/src/app/collective-rewards/allocations/hooks/index.ts
index e8d9fbda..3dffbdee 100644
--- a/src/app/collective-rewards/allocations/hooks/index.ts
+++ b/src/app/collective-rewards/allocations/hooks/index.ts
@@ -1 +1,2 @@
 export * from './useBackerTotalAllocation'
+export * from './useGetVotingPower'
diff --git a/src/app/collective-rewards/allocations/hooks/useBackerTotalAllocation.ts b/src/app/collective-rewards/allocations/hooks/useBackerTotalAllocation.ts
index f686e97d..16dc1279 100644
--- a/src/app/collective-rewards/allocations/hooks/useBackerTotalAllocation.ts
+++ b/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 } from 'viem'
+import { Address, parseEther } from 'viem'
 import { useReadContract, useReadContracts } from 'wagmi'
 
 export const useBackerTotalAllocation = (backer: Address) => {
@@ -18,28 +18,46 @@ export const useBackerTotalAllocation = (backer: Address) => {
   })
 
   return {
-    data,
+    data: parseEther('200'),
     isLoading,
     error,
   }
 }
 
-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,
-    },
-  })
+// 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,
+//   }
+// }
+const data = [
+  BigInt('100000000000000000'), // 0.1 ETH equivalent for builder 1
+  BigInt('200000000000000000'), // 0.2 ETH equivalent for builder 2
+  BigInt('150000000000000000'), // 0.15 ETH equivalent for builder 3
+  BigInt('300000000000000000'), // 0.3 ETH equivalent for builder 4
+  BigInt('250000000000000000'), // 0.25 ETH equivalent for builder 5
+  BigInt('180000000000000000'), // 0.18 ETH equivalent for builder 6
+  BigInt('220000000000000000'), // 0.22 ETH equivalent for builder 7
+  BigInt('270000000000000000'), // 0.27 ETH equivalent for builder 8
+]
+
+export const useGetAllAllocationOf = (backer: Address, gauges: Address[]) => {
   return {
-    data: data?.map(({ result }) => result as bigint),
-    isLoading,
-    error,
+    data,
+    isLoading: false,
+    error: null,
   }
 }
diff --git a/src/app/collective-rewards/allocations/hooks/useGetVotingPower.ts b/src/app/collective-rewards/allocations/hooks/useGetVotingPower.ts
new file mode 100644
index 00000000..e46d2b88
--- /dev/null
+++ b/src/app/collective-rewards/allocations/hooks/useGetVotingPower.ts
@@ -0,0 +1,24 @@
+import { StRIFTokenAbi } from '@/lib/abis/StRIFTokenAbi'
+import { AVERAGE_BLOCKTIME } from '@/lib/constants'
+import { tokenContracts } from '@/lib/contracts'
+import { useAccount, useReadContract, useReadContracts } from 'wagmi'
+
+export const useGetVotingPower = () => {
+  const { address } = useAccount()
+
+  const { data, isLoading, error } = useReadContract({
+    abi: StRIFTokenAbi,
+    address: tokenContracts.stRIF,
+    functionName: 'balanceOf',
+    args: [address!],
+    query: {
+      refetchInterval: AVERAGE_BLOCKTIME,
+    },
+  })
+
+  return {
+    data,
+    isLoading,
+    error,
+  }
+}
diff --git a/src/app/collective-rewards/allocations/page.tsx b/src/app/collective-rewards/allocations/page.tsx
index df224b77..481fa623 100644
--- a/src/app/collective-rewards/allocations/page.tsx
+++ b/src/app/collective-rewards/allocations/page.tsx
@@ -4,19 +4,38 @@ import { MainContainer } from '@/components/MainContainer/MainContainer'
 import { Typography } from '@/components/Typography'
 import { AllocationAmount } from './components/AllocationAmount'
 import { AllocationMetrics } from './components/AllocationMetrics'
-import { BuilderAllocation } from './components/BuilderAllocation'
+import { BuilderAllocation, BuilderAllocationProps } from './components/BuilderAllocation'
 import { Header } from './components/Header'
-import { useState } from 'react'
-import { useAllocationsContext } from './context'
-
-const ALLOCATION_EXCEED_AMOUNT_ERROR = 'Builder allocations exceeds amount to allocate'
+import { useContext, useState } from 'react'
+import { AllocationsContext } from './context'
+import { Button } from '@/components/Button'
 
 export default function Allocations() {
-  const { selections } = useAllocationsContext()
-  /* TODO: Error message is set when
-   * - the cumulative amount exceeds the allocation amount (ALLOCATION_EXCEED_AMOUNT_ERROR)
-   */
-  const [errorMessage, setErrorMessage] = useState<string>('')
+  const {
+    state: {
+      allocations,
+      selections,
+      backer,
+      isContextLoading,
+      contextError,
+      cumulativeAllocation,
+      getBuilder,
+    },
+    actions: { toggleSelectedBuilder, updateAllocation, updateAllocations },
+  } = useContext(AllocationsContext)
+
+  const saveAllocations = () => {
+    // TODO: save current allocations
+  }
+
+  const cancel = () => {
+    // TODO: cancel
+    // how do we know where we're coming from?
+  }
+
+  const resetAllocations = () => {
+    // TODO: reset allocations to initial status
+  }
 
   return (
     <MainContainer>
@@ -26,20 +45,40 @@ export default function Allocations() {
         </div>
         <div className="flex flex-col items-start gap-6 self-stretch">
           <AllocationMetrics />
-          <AllocationAmount
-            // TODO: balance set only to make the percentage buttons work
-            balance={50000000000000000000n}
-            errorMessage={errorMessage}
-          />
+          <AllocationAmount balance={backer.balance} />
         </div>
         <div className="flex flex-col items-start gap-4 self-stretch">
           <Typography tagVariant="h2" className="text-lg font-bold leading-[18px]">
             Selected Builders
           </Typography>
           <div className="flex items-start content-start flex-wrap gap-4">
-            {builders.map((builder, index) => (
-              <BuilderAllocation key={index} {...builder} />
-            ))}
+            {Object.entries(allocations).map(([key, value]) => {
+              const index = Number(key)
+              const builderInfo = getBuilder(index)
+              const builder: BuilderAllocationProps = {
+                ...builderInfo,
+                index,
+                currentAllocation: value,
+              }
+              return <BuilderAllocation key={index} {...builder} />
+            })}
+          </div>
+          <div className="flex items-center self-stretch justify-between gap-4">
+            <div className="flex gap-4">
+              <Button variant="primary" onClick={() => saveAllocations()}>
+                {' '}
+                Save allocations
+              </Button>
+              <Button variant="secondary" onClick={() => cancel()}>
+                {' '}
+                Cancel{' '}
+              </Button>
+            </div>
+
+            <Button variant="borderless" onClick={() => resetAllocations()}>
+              {' '}
+              Reset allocations
+            </Button>
           </div>
         </div>
       </div>
diff --git a/src/app/collective-rewards/page.tsx b/src/app/collective-rewards/page.tsx
index eccdbd8f..f0c94420 100644
--- a/src/app/collective-rewards/page.tsx
+++ b/src/app/collective-rewards/page.tsx
@@ -4,6 +4,7 @@ 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 (
diff --git a/src/app/collective-rewards/types.ts b/src/app/collective-rewards/types.ts
index 24d879cd..57e97ffa 100644
--- a/src/app/collective-rewards/types.ts
+++ b/src/app/collective-rewards/types.ts
@@ -11,6 +11,7 @@ export const builderStatusOptions = [
   BuilderStatusProposalCreatedMVP,
 ] as const
 
+// TODO: type BuilderStatus should include 'Paused' & 'Deactivated'
 export type BuilderStatus = (typeof builderStatusOptions)[number]
 export type BuilderStatusShown = Exclude<BuilderInfo['status'], 'In progress - mvp'>
 
@@ -19,6 +20,9 @@ export type BuilderInfo = {
   status: BuilderStatus
   proposals: CreateBuilderProposalEventLog[]
   gauge: Address
+  kickback: number
+  builderName: string
+  joiningDate: string
 }
 
 export type ProposalsToState = Record<string, ProposalState>
diff --git a/src/app/collective-rewards/user/hooks/useGetBuilders.ts b/src/app/collective-rewards/user/hooks/useGetBuilders.ts
index ae1353c1..eb216198 100644
--- a/src/app/collective-rewards/user/hooks/useGetBuilders.ts
+++ b/src/app/collective-rewards/user/hooks/useGetBuilders.ts
@@ -51,162 +51,179 @@ const getCombinedBuilderStatus = (builderState: BuilderStateStruct): BuilderStat
   return EXCLUDED_BUILDER_STATUS
 }
 
-export const useGetBuilders = (): BuildersLoader => {
-  /*
-   * get Gauges
-   * for each Gauge
-   *    get Builder from Gauge
-   *    get Builder state
-   *    ignore the builder if paused or revoked (to be confirmed)
-   */
-  // get the gauges
-  const { data: gauges, isLoading: gaugesLoading, error: gaugesError } = useGetGaugesArray('active')
-
-  // get the builders for each gauge
-  const gaugeToBuilderCalls = gauges?.map(
-    gauge =>
-      ({
-        address: BackersManagerAddress,
-        abi: BuilderRegistryAbi,
-        functionName: 'gaugeToBuilder',
-        args: [gauge],
-      }) as const,
-  )
-  const {
-    data: buildersResult,
-    isLoading: buildersLoading,
-    error: buildersError,
-  } = useReadContracts<Address[]>({
-    contracts: gaugeToBuilderCalls,
-    query: {
-      refetchInterval: AVERAGE_BLOCKTIME,
-    },
-  })
-  const builders = buildersResult?.map(builder => builder.result) as Address[]
-
-  const builderToGauge = builders?.reduce(
-    (acc, builder, index) => {
-      acc[builder] = gauges![index]
-      return acc
-    },
-    {} as Record<Address, Address>,
-  )
-
-  // get the builder state for each builder
-  const builderStatesCalls = builders?.map(
-    builder =>
-      ({
-        address: BackersManagerAddress,
-        abi: BuilderRegistryAbi,
-        functionName: 'builderState',
-        args: [builder],
-      }) as const,
-  )
-  const {
-    data: builderStatesResult,
-    isLoading: builderStatesLoading,
-    error: builderStatesError,
-  } = useReadContracts({ contracts: builderStatesCalls, query: { refetchInterval: AVERAGE_BLOCKTIME } })
-  const builderStates = builderStatesResult?.map(({ result }) => result as BuilderStateStruct)
-
-  const builderStatusMap = builders?.reduce<BuilderStatusMap>((acc, builder, index) => {
-    const builderState = (builderStates?.[index] ?? []) as BuilderStateStruct
-    const status = getCombinedBuilderStatus(builderState)
-    if (status !== EXCLUDED_BUILDER_STATUS) {
-      acc[builder] = status as BuilderStatus
-    }
-
-    return acc
-  }, {})
-
-  const {
-    data: buildersProposalsMap,
-    isLoading: builderProposalsMapLoading,
-    error: builderProposalsMapError,
-  } = useFetchCreateBuilderProposals()
-
-  const data = useMemo(() => {
-    return Object.entries(buildersProposalsMap ?? {}).map<BuilderInfo>(([builder, proposals]) => ({
-      address: getAddress(builder),
-      status:
-        builderStatusMap && builder in builderStatusMap
-          ? builderStatusMap[builder as Address] // V2
-          : BuilderStatusProposalCreatedMVP, // MVP
-      proposals: Object.values(proposals),
-      gauge: builderToGauge?.[builder as Address],
-    }))
-  }, [builderStatusMap, buildersProposalsMap, builderToGauge])
-
-  const isLoading = builderProposalsMapLoading || builderStatesLoading || buildersLoading || gaugesLoading
-  const error = builderProposalsMapError ?? builderStatesError ?? buildersError ?? gaugesError
-
-  return {
-    data,
-    isLoading,
-    error,
-  }
-}
-
-// export const useGetActiveBuilders = (): BuildersLoader => {
-//   const { data, isLoading, error } = useGetBuilders()
+// export const useGetBuilders = (): BuildersLoader => {
+//   /*
+//    * get Gauges
+//    * for each Gauge
+//    *    get Builder from Gauge
+//    *    get Builder state
+//    *    ignore the builder if paused or revoked (to be confirmed)
+//    */
+//   // get the gauges
+//   const { data: gauges, isLoading: gaugesLoading, error: gaugesError } = useGetGaugesArray('active')
+
+//   // get the builders for each gauge
+//   const gaugeToBuilderCalls = gauges?.map(
+//     gauge =>
+//       ({
+//         address: BackersManagerAddress,
+//         abi: BuilderRegistryAbi,
+//         functionName: 'gaugeToBuilder',
+//         args: [gauge],
+//       }) as const,
+//   )
+//   const {
+//     data: buildersResult,
+//     isLoading: buildersLoading,
+//     error: buildersError,
+//   } = useReadContracts<Address[]>({
+//     contracts: gaugeToBuilderCalls,
+//     query: {
+//       refetchInterval: AVERAGE_BLOCKTIME,
+//     },
+//   })
+//   const builders = buildersResult?.map(builder => builder.result) as Address[]
+
+//   const builderToGauge = builders?.reduce(
+//     (acc, builder, index) => {
+//       acc[builder] = gauges![index]
+//       return acc
+//     },
+//     {} as Record<Address, Address>,
+//   )
+
+//   // get the builder state for each builder
+//   const builderStatesCalls = builders?.map(
+//     builder =>
+//       ({
+//         address: BackersManagerAddress,
+//         abi: BuilderRegistryAbi,
+//         functionName: 'builderState',
+//         args: [builder],
+//       }) as const,
+//   )
+//   const {
+//     data: builderStatesResult,
+//     isLoading: builderStatesLoading,
+//     error: builderStatesError,
+//   } = useReadContracts({ contracts: builderStatesCalls, query: { refetchInterval: AVERAGE_BLOCKTIME } })
+//   const builderStates = builderStatesResult?.map(({ result }) => result as BuilderStateStruct)
+
+//   const builderStatusMap = builders?.reduce<BuilderStatusMap>((acc, builder, index) => {
+//     const builderState = (builderStates?.[index] ?? []) as BuilderStateStruct
+//     const status = getCombinedBuilderStatus(builderState)
+//     if (status !== EXCLUDED_BUILDER_STATUS) {
+//       acc[builder] = status as BuilderStatus
+//     }
+
+//     return acc
+//   }, {})
+
+//   const {
+//     data: buildersProposalsMap,
+//     isLoading: builderProposalsMapLoading,
+//     error: builderProposalsMapError,
+//   } = useFetchCreateBuilderProposals()
+
+//   const data = useMemo(() => {
+//     // we need to add the kickback and the joining date
+//     TODO: return Object.entries(buildersProposalsMap ?? {}).map<BuilderInfo>(([builder, proposals]) => ({
+//       address: getAddress(builder),
+//       status:
+//         builderStatusMap && builder in builderStatusMap
+//           ? builderStatusMap[builder as Address] // V2
+//           : BuilderStatusProposalCreatedMVP, // MVP
+//       proposals: Object.values(proposals),
+//       gauge: builderToGauge?.[builder as Address],
+//     }))
+//   }, [builderStatusMap, buildersProposalsMap, builderToGauge])
+
+//   const isLoading = builderProposalsMapLoading || builderStatesLoading || buildersLoading || gaugesLoading
+//   const error = builderProposalsMapError ?? builderStatesError ?? buildersError ?? gaugesError
 
 //   return {
-//     data: data.filter(builder => builder.status === BuilderStatusActive),
+//     data,
 //     isLoading,
 //     error,
 //   }
 // }
-export const useGetActiveBuilders = (): BuildersLoader => {
-  const builders: BuilderInfo[] = [
-    {
-      address: '0x1234567890abcdef1234567890abcdef12345678',
-      status: 'Active',
-      proposals: [],
-      gauge: '0x1234567890abcdef1234567890abcdef12345678',
-    },
-    {
-      address: '0x1234567890abcdef1234567890abcdef12345679',
-      status: 'Active',
-      proposals: [],
-      gauge: '0x1234567890abcdef1234567890abcdef12345679',
-    },
-    {
-      address: '0x1234567890abcdef1234567890abcdef1234567a',
-      status: 'Active',
-      proposals: [],
-      gauge: '0x1234567890abcdef1234567890abcdef1234567a',
-    },
-    {
-      address: '0x1234567890abcdef1234567890abcdef1234567b',
-      status: 'Active',
-      proposals: [],
-      gauge: '0x1234567890abcdef1234567890abcdef1234567b',
-    },
-    {
-      address: '0x1234567890abcdef1234567890abcdef1234567c',
-      status: 'Active',
-      proposals: [],
-      gauge: '0x1234567890abcdef1234567890abcdef1234567c',
-    },
-    {
-      address: '0x1234567890abcdef1234567890abcdef1234567d',
-      status: 'Active',
-      proposals: [],
-      gauge: '0x1234567890abcdef1234567890abcdef1234567d',
-    },
-    {
-      address: '0x1234567890abcdef1234567890abcdef1234567e',
-      status: 'Active',
-      proposals: [],
-      gauge: '0x1234567890abcdef1234567890abcdef1234567e',
-    },
-    {
-      address: '0x1234567890abcdef1234567890abcdef1234567f',
-      status: 'Active',
-      proposals: [],
-      gauge: '0x1234567890abcdef1234567890abcdef1234567',
-    },
-  ]
+
+const builders: BuilderInfo[] = [
+  {
+    address: '0x1234567890abcdef1234567890abcdef12345678',
+    status: 'Active',
+    proposals: [],
+    gauge: '0x1234567890abcdef1234567890abcdef12345678',
+    kickback: 0.1,
+    builderName: 'Builder One',
+    joiningDate: '2023-01-01',
+  },
+  {
+    address: '0x1234567890abcdef1234567890abcdef12345679',
+    status: 'Active',
+    proposals: [],
+    gauge: '0x1234567890abcdef1234567890abcdef12345679',
+    kickback: 0.2,
+    builderName: 'Builder Two',
+    joiningDate: '2023-02-01',
+  },
+  {
+    address: '0x1234567890abcdef1234567890abcdef1234567a',
+    status: 'Active',
+    proposals: [],
+    gauge: '0x1234567890abcdef1234567890abcdef1234567a',
+    kickback: 0.3,
+    builderName: 'Builder Three',
+    joiningDate: '2023-03-01',
+  },
+  {
+    address: '0x1234567890abcdef1234567890abcdef1234567b',
+    status: 'Active',
+    proposals: [],
+    gauge: '0x1234567890abcdef1234567890abcdef1234567b',
+    kickback: 0.4,
+    builderName: 'Builder Four',
+    joiningDate: '2023-04-01',
+  },
+  {
+    address: '0x1234567890abcdef1234567890abcdef1234567c',
+    status: 'Active',
+    proposals: [],
+    gauge: '0x1234567890abcdef1234567890abcdef1234567c',
+    kickback: 0.5,
+    builderName: 'Builder Five',
+    joiningDate: '2023-05-01',
+  },
+  {
+    address: '0x1234567890abcdef1234567890abcdef1234567d',
+    status: 'Active',
+    proposals: [],
+    gauge: '0x1234567890abcdef1234567890abcdef1234567d',
+    kickback: 0.6,
+    builderName: 'Builder Six',
+    joiningDate: '2023-06-01',
+  },
+  {
+    address: '0x1234567890abcdef1234567890abcdef1234567e',
+    status: 'Active',
+    proposals: [],
+    gauge: '0x1234567890abcdef1234567890abcdef1234567e',
+    kickback: 0.7,
+    builderName: 'Builder Seven',
+    joiningDate: '2023-07-01',
+  },
+  {
+    address: '0x1234567890abcdef1234567890abcdef1234567f',
+    status: 'Active',
+    proposals: [],
+    gauge: '0x1234567890abcdef1234567890abcdef1234567f',
+    kickback: 0.8,
+    builderName: 'Builder Eight',
+    joiningDate: '2023-08-01',
+  },
+]
+
+export const useGetBuilders = (): BuildersLoader => {
   return {
     data: builders,
     isLoading: false,
diff --git a/src/app/providers/ContextProviders.tsx b/src/app/providers/ContextProviders.tsx
index b0868c88..64a51876 100644
--- a/src/app/providers/ContextProviders.tsx
+++ b/src/app/providers/ContextProviders.tsx
@@ -18,9 +18,7 @@ export const ContextProviders = ({ children }: Props) => {
       <WagmiProvider config={config}>
         <QueryClientProvider client={queryClient}>
           <AlertProvider>
-            <AllocationsContextProvider>
-              {children} {}
-            </AllocationsContextProvider>
+            <AllocationsContextProvider>{children}</AllocationsContextProvider>
           </AlertProvider>
         </QueryClientProvider>
       </WagmiProvider>
diff --git a/src/app/user/Balances/balanceUtils.ts b/src/app/user/Balances/balanceUtils.ts
index 8d7c40a0..359cbf3a 100644
--- a/src/app/user/Balances/balanceUtils.ts
+++ b/src/app/user/Balances/balanceUtils.ts
@@ -1,9 +1,10 @@
 import { BigNumberish, ethers } from 'ethers'
 import { GetAddressTokenResult, TokenBalance } from '@/app/user/types'
 import { tokenContracts } from '@/lib/contracts'
+import { formatEther } from 'viem'
 
-export const formatBalanceToHuman = (balance: BigNumberish, decimal = 18) =>
-  ethers.formatUnits(balance, decimal)
+// export const formatBalanceToHuman = (balance: BigNumberish, decimal = 18) =>
+//   ethers.formatUnits(balance, decimal)
 
 const symbolsToGetFromArray = {
   RIF: { equivalentSymbols: ['tRIF', 'RIF'], currentContract: tokenContracts.RIF },
@@ -34,7 +35,7 @@ export const getTokenBalance = (
         token.contractAddress.toLowerCase() === currentContract.toLowerCase(),
     )
     if (tokenData) {
-      resultToReturn.balance = formatBalanceToHuman(tokenData.balance)
+      resultToReturn.balance = formatEther(BigInt(tokenData.balance))
       resultToReturn.symbol = tokenData.symbol
       return resultToReturn
     }