TOK-525: number formatter

.env.testnet.local

@@ -29,7 +29,4 @@ NEXT_PUBLIC_ENV_DATA_URL="https://raw.githubusercontent.com/RootstockCollective/
 NEXT_PUBLIC_OG_FOUNDERS=0x7E6d9969CAC008bAe5f7b144df3c955515404538
 NEXT_PUBLIC_OG_PARTNERS=0x285046a90fb322E6BaCa4F38Bb884e3C0904F7EB
 NEXT_PUBLIC_OG_CONTRIBUTORS=0xDC03B8fb7E47E4651f5008bD718a804726424A75
-
 NEXT_PUBLIC_ENABLE_CORS_BYPASS=true
-NEXT_PUBLIC_ENABLE_FEATURE_V2_REWARDS=true
-

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

@@ -1,13 +1,13 @@
 'use client'
 
 import { Allocations, AllocationsContext } from '@/app/collective-rewards/allocations/context'
-import { formatOnchainFraction } from '@/app/collective-rewards/rewards'
 import { Button, ButtonProps } from '@/components/Button'
 import { Input } from '@/components/Input'
 import { cn } from '@/lib/utils'
 import { useContext, useState } from 'react'
 import { Address, parseEther } from 'viem'
 import { StakeHint } from './StakeHint'
+import { formatCurrency } from '@/app/collective-rewards/utils'
 
 const PercentageButton = ({ children, variant, ...rest }: ButtonProps) => (
   <Button
@@ -63,7 +63,7 @@ export const AllocationAmount = () => {
           name="allocated-amount"
           fullWidth
           onChange={handleOnChange}
-          value={formatOnchainFraction(amountToAllocate)}
+          value={formatCurrency(amountToAllocate, 'stRIF')}
           errorMessage={
             cumulativeAllocation > amountToAllocate && cumulativeAllocation < balance
               ? ALLOCATION_EXCEED_AMOUNT_ERROR

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { AllocationsContext } from '@/app/collective-rewards/allocations/context'
-import { formatOnchainFraction } from '@/app/collective-rewards/rewards'
+import { formatCurrency } from '@/app/collective-rewards/utils'
 import { Paragraph } from '@/components/Typography'
 import { useContext } from 'react'
 
@@ -45,11 +45,11 @@ export const AllocationMetrics = () => {
     },
   } = useContext(AllocationsContext)
 
-  const balanceValue = `${formatOnchainFraction(balance)} stRIF`
+  const balanceValue = `${formatCurrency(balance, 'stRIF')} stRIF`
 
-  const allocatedAmountValue = `${formatOnchainFraction(amountToAllocate)} stRIF`
+  const allocatedAmountValue = `${formatCurrency(amountToAllocate, 'stRIF')} stRIF`
 
-  const unallocatedAmount = formatOnchainFraction(balance - amountToAllocate)
+  const unallocatedAmount = formatCurrency(balance - amountToAllocate, 'stRIF')
 
   const unallocatedAmountValue = `${unallocatedAmount} stRIF`
   return (

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

@@ -1,5 +1,5 @@
 import { AllocationsContext } from '@/app/collective-rewards/allocations/context'
-import { formatOnchainFraction } from '@/app/collective-rewards/rewards'
+import { formatCurrency } from '@/app/collective-rewards/utils'
 import { weiToPercentage } from '@/app/collective-rewards/settings'
 import { Builder } from '@/app/collective-rewards/types'
 import { Input } from '@/components/Input'
@@ -41,9 +41,9 @@ export const BuilderAllocation = (builder: BuilderAllocationProps) => {
       <Input
         type="number"
         name={`allocation-${address}`}
-        hint={`Allocation left ${allocationLeft > 0 ? formatOnchainFraction(allocationLeft) : '0'} stRIF`}
+        hint={`Allocation left ${allocationLeft > 0 ? formatCurrency(allocationLeft, 'stRIF') : '0'} stRIF`}
         onChange={onInputChange}
-        value={formatOnchainFraction(currentAllocation || 0n)}
+        value={formatCurrency(currentAllocation || 0n, 'stRIF')}
       />
       <Slider
         value={[Number(currentAllocation || 0n)]}

src/app/collective-rewards/metrics/AllTimeRewardsMetrics.tsx

@@ -10,7 +10,6 @@ import {
 import { FC } from 'react'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
 import { withSpinner } from '@/components/LoadingSpinner/withLoadingSpinner'
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { usePricesContext } from '@/shared/context/PricesContext'
 
 type TokenRewardsMetricsProps = {
@@ -40,10 +39,9 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
     0n,
   )
 
-  const totalRewardsInHuman = Number(formatBalanceToHuman(totalRewards))
   const price = prices[symbol]?.price ?? 0
 
-  const { amount, fiatAmount } = formatMetrics(totalRewardsInHuman, price, symbol, currency)
+  const { amount, fiatAmount } = formatMetrics(totalRewards, price, symbol, currency)
 
   return withSpinner(
     TokenMetricsCardRow,

src/app/collective-rewards/metrics/TotalAllocationsMetrics.tsx

@@ -2,16 +2,15 @@ import { useGaugesGetFunction } from '@/app/collective-rewards/shared/hooks'
 import { Address } from 'viem'
 import { FC } from 'react'
 import { usePricesContext } from '@/shared/context/PricesContext'
-import { formatCurrency } from '@/lib/utils'
 import {
   MetricsCard,
   MetricsCardTitle,
   TokenMetricsCardRow,
   Token,
-  formatOnchainFraction,
+  formatMetrics,
 } from '@/app/collective-rewards/rewards'
 import { withSpinner } from '@/components/LoadingSpinner/withLoadingSpinner'
-import { useHandleErrors } from '@/app/collective-rewards/utils'
+import { useHandleErrors, formatCurrency } from '@/app/collective-rewards/utils'
 
 type TotalAllocationsProps = {
   gauges: Address[]
@@ -31,8 +30,8 @@ export const TotalAllocationsMetrics: FC<TotalAllocationsProps> = ({
   const price = prices[symbol]?.price ?? 0
 
   const totalAllocations = Object.values(data).reduce((acc, allocation) => acc + allocation, 0n)
-  const totalAllocationsInHuman = Number(formatOnchainFraction(totalAllocations))
-  const fiatAmount = `= ${currency} ${formatCurrency(totalAllocationsInHuman * price, currency)}`
+
+  const { amount, fiatAmount } = formatMetrics(totalAllocations, price, 'stRIF', currency)
 
   return (
     <MetricsCard borderless>
@@ -47,7 +46,7 @@ export const TotalAllocationsMetrics: FC<TotalAllocationsProps> = ({
         TokenMetricsCardRow,
         'min-h-0 grow-0',
       )({
-        amount: `${totalAllocationsInHuman} STRIF`,
+        amount,
         fiatAmount,
         isLoading,
       })}

src/app/collective-rewards/rewards/backers/ClaimableRewards.tsx

@@ -12,7 +12,6 @@ import {
   useBackerRewardsContext,
   ClaimYourRewardsButton,
 } from '@/app/collective-rewards/rewards'
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
 import { withSpinner } from '@/components/LoadingSpinner/withLoadingSpinner'
 
@@ -35,12 +34,7 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
 
   const tokenPrice = prices[symbol]?.price ?? 0
 
-  const { amount, fiatAmount } = formatMetrics(
-    Number(formatBalanceToHuman(earnedRewards)),
-    tokenPrice,
-    symbol,
-    currency,
-  )
+  const { amount, fiatAmount } = formatMetrics(earnedRewards, tokenPrice, symbol, currency)
 
   const { claimRewards, isClaimable } = useClaimBackerRewards(address)
 

src/app/collective-rewards/rewards/backers/RewardsCard.tsx

@@ -9,7 +9,6 @@ import {
   TooltipProps,
 } from '@/app/collective-rewards/rewards'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { usePricesContext } from '@/shared/context/PricesContext'
 import { FC } from 'react'
 import { withSpinner } from '@/components/LoadingSpinner/withLoadingSpinner'
@@ -46,10 +45,9 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
 
   const { prices } = usePricesContext()
 
-  const totalRewardsInHuman = Number(formatBalanceToHuman(totalRewards))
   const price = prices[symbol]?.price ?? 0
 
-  const { amount, fiatAmount } = formatMetrics(totalRewardsInHuman, price, symbol, currency)
+  const { amount, fiatAmount } = formatMetrics(totalRewards, price, symbol, currency)
 
   return withSpinner(
     TokenMetricsCardRow,

src/app/collective-rewards/rewards/builders/AllTimeRewards.tsx

@@ -1,15 +1,14 @@
 import {
-  formatMetrics,
   MetricsCard,
   MetricsCardTitle,
   TokenMetricsCardRow,
   useGetBuilderRewards,
   useGetBuilderRewardsClaimedLogs,
   Token,
   BuilderRewardDetails,
+  formatMetrics,
 } from '@/app/collective-rewards/rewards'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { withSpinner } from '@/components/LoadingSpinner/withLoadingSpinner'
 import { usePricesContext } from '@/shared/context/PricesContext'
 import { FC } from 'react'
@@ -49,10 +48,9 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
     }, 0n) ?? 0n
 
   const totalRewards = totalClaimedRewards + (claimableRewards ?? 0n)
-  const totalRewardsInHuman = Number(formatBalanceToHuman(totalRewards))
   const price = prices[symbol]?.price ?? 0
 
-  const { amount, fiatAmount } = formatMetrics(totalRewardsInHuman, price, symbol, currency)
+  const { amount, fiatAmount } = formatMetrics(totalRewards, price, symbol, currency)
 
   return withSpinner(
     TokenMetricsCardRow,

src/app/collective-rewards/rewards/builders/ClaimableRewards.tsx

@@ -1,5 +1,4 @@
 import {
-  formatMetrics,
   MetricsCard,
   MetricsCardTitle,
   TokenMetricsCardRow,
@@ -8,9 +7,9 @@ import {
   Token,
   ClaimYourRewardsButton,
   BuilderRewardDetails,
+  formatMetrics,
 } from '@/app/collective-rewards/rewards'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { withSpinner } from '@/components/LoadingSpinner/withLoadingSpinner'
 import { usePricesContext } from '@/shared/context/PricesContext'
 import { FC } from 'react'
@@ -40,12 +39,7 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
 
   const tokenPrice = prices[symbol]?.price ?? 0
 
-  const { amount, fiatAmount } = formatMetrics(
-    Number(formatBalanceToHuman(rewards ?? 0n)),
-    tokenPrice,
-    symbol,
-    currency,
-  )
+  const { amount, fiatAmount } = formatMetrics(rewards ?? 0n, tokenPrice, symbol, currency)
 
   const { isClaimable, claimRewards, isPaused } = useClaimBuilderRewardsPerToken(builder, gauge, address)
   const content = isPaused ? 'You cannot be paused to claim rewards' : undefined

src/app/collective-rewards/rewards/builders/EstimatedRewards.tsx

@@ -11,7 +11,6 @@ import {
   useGetBackerRewardPercentage,
 } from '@/app/collective-rewards/rewards'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { usePricesContext } from '@/shared/context/PricesContext'
 import { FC, useEffect, useState } from 'react'
 import { Address } from 'viem'
@@ -75,10 +74,9 @@ const TokenRewards: FC<TokenRewardsProps> = ({ builder, gauge, token: { id, symb
   const rewardsAmount =
     rewardShares && totalPotentialRewards ? (rewards * rewardShares) / totalPotentialRewards : 0n
   // The complement of the reward percentage is applied to the estimated rewards since are from the builder's perspective
-  const estimatedRewardsInHuman =
-    Number(formatBalanceToHuman(rewardsAmount)) * (1 - rewardPercentageToApply / 100)
+  const estimatedRewards = BigInt(rewardsAmount) * (1n - BigInt(rewardPercentageToApply) / 100n)
   const price = prices[symbol]?.price ?? 0
-  const { amount, fiatAmount } = formatMetrics(estimatedRewardsInHuman, price, symbol, currency)
+  const { amount, fiatAmount } = formatMetrics(estimatedRewards, price, symbol, currency)
 
   return withSpinner(
     TokenMetricsCardRow,

src/app/collective-rewards/rewards/builders/LastCycleRewards.tsx

@@ -10,7 +10,6 @@ import {
   BuilderRewardDetails,
 } from '@/app/collective-rewards/rewards'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { withSpinner } from '@/components/LoadingSpinner/withLoadingSpinner'
 import { usePricesContext } from '@/shared/context/PricesContext'
 import { FC } from 'react'
@@ -39,10 +38,9 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
 
   const { prices } = usePricesContext()
 
-  const lastCycleRewards = getLastCycleRewards(cycle, rewardsPerToken[address])
-  const lastCycleRewardsInHuman = Number(formatBalanceToHuman(lastCycleRewards.builderAmount))
+  const { builderAmount } = getLastCycleRewards(cycle, rewardsPerToken[address])
   const price = prices[symbol]?.price ?? 0
-  const { amount, fiatAmount } = formatMetrics(lastCycleRewardsInHuman, price, symbol, currency)
+  const { amount, fiatAmount } = formatMetrics(builderAmount, price, symbol, currency)
 
   return withSpinner(
     TokenMetricsCardRow,

src/app/collective-rewards/rewards/utils/formatMetrics.ts

@@ -1,16 +1,12 @@
-import { formatCurrency, toFixed } from '@/lib/utils'
-import { formatUnits } from 'viem'
+import { formatCurrency } from '@/app/collective-rewards/utils/formatting/formatter'
 
-export const formatMetrics = (amount: number, price: number, symbol: string, currency: string) => ({
-  amount: `${toFixed(amount)} ${symbol}`,
-  fiatAmount: `= ${currency} ${formatCurrency(amount * price, currency)}`,
+export const formatMetrics = (
+  amount: number | bigint,
+  price: number | bigint,
+  symbol: string,
+  currency: string,
+) => ({
+  amount: `${formatCurrency(amount, symbol) || 0} ${symbol}`,
+  fiatAmount: `= ${currency} ${formatCurrency(Number(formatCurrency(amount, currency)) * Number(price) || 0, currency)}`,
+  // fiatAmount: `= ${currency} ${formatCurrency(Number(amount) * Number(price), currency) || 0}`,
 })
-
-export const formatOnchainFraction = (amount: bigint, displayDecimals = 2, decimals = 18) => {
-  const formattedAmount = formatUnits(amount, decimals)
-  const length =
-    formattedAmount.indexOf('.') >= 0
-      ? formattedAmount.indexOf('.') + displayDecimals + 1
-      : formattedAmount.length
-  return formattedAmount.slice(0, length)
-}