back to state

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">

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

@@ -1,13 +1,15 @@
 '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'
 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>
   )

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>
   )
 }

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

@@ -2,15 +2,15 @@ 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'
 
 export type BuilderAllocationHeaderProps = {
   address: Address
   builderName: string
-  status: BuilderStatusShown
+  status: BuilderStatus
   joiningDate: string
 }