TOK-525: values-digits-display

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { Allocations, AllocationsContext } from '@/app/collective-rewards/allocations/context'
-import { formatOnchainFraction } from '@/app/collective-rewards/rewards'
+import { formatSymbol } from '@/app/collective-rewards/rewards'
 import { Button, ButtonProps } from '@/components/Button'
 import { Input } from '@/components/Input'
 import { cn } from '@/lib/utils'
@@ -63,7 +63,7 @@ export const AllocationAmount = () => {
           name="allocated-amount"
           fullWidth
           onChange={handleOnChange}
-          value={formatOnchainFraction(amountToAllocate)}
+          value={formatSymbol(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 { formatSymbol } from '@/app/collective-rewards/rewards'
 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 = `${formatSymbol(balance, 'stRIF')} stRIF`
 
-  const allocatedAmountValue = `${formatOnchainFraction(amountToAllocate)} stRIF`
+  const allocatedAmountValue = `${formatSymbol(amountToAllocate, 'stRIF')} stRIF`
 
-  const unallocatedAmount = formatOnchainFraction(balance - amountToAllocate)
+  const unallocatedAmount = formatSymbol(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 { formatSymbol } from '@/app/collective-rewards/rewards'
 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 ${formatSymbol(allocationLeft, 'stRIF')} stRIF`}
         onChange={onInputChange}
-        value={formatOnchainFraction(currentAllocation || 0n)}
+        value={formatSymbol(currentAllocation || 0n, 'stRIF')}
       />
       <Slider
         value={[Number(currentAllocation || 0n)]}

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

@@ -13,6 +13,7 @@ import {
   TotalAllocationCell,
   useSearchContext,
 } from '@/app/collective-rewards/shared'
+import { getCombinedFiatAmount } from '../utils'
 
 enum RewardsColumnKeyEnum {
   builder = 'builder',
@@ -60,13 +61,13 @@ export const BuildersLeaderBoardTable: FC = () => {
       rewardPercentage: (a: IRewardData, b: IRewardData) =>
         Number(a.rewardPercentage.current - b.rewardPercentage.current),
       lastCycleRewards: (a: IRewardData, b: IRewardData) => {
-        const aValue = a.lastCycleReward.rif.crypto.value + a.lastCycleReward.rbtc.crypto.value
-        const bValue = b.lastCycleReward.rif.crypto.value + b.lastCycleReward.rbtc.crypto.value
+        const aValue = getCombinedFiatAmount([a.lastCycleRewards.rif.amount, a.lastCycleRewards.rbtc.amount])
+        const bValue = getCombinedFiatAmount([b.lastCycleRewards.rif.amount, b.lastCycleRewards.rbtc.amount])
         return aValue - bValue
       },
       estimatedRewards: (a: IRewardData, b: IRewardData) => {
-        const aValue = a.estimatedReward.rif.crypto.value + a.estimatedReward.rbtc.crypto.value
-        const bValue = b.estimatedReward.rif.crypto.value + b.estimatedReward.rbtc.crypto.value
+        const aValue = getCombinedFiatAmount([a.estimatedRewards.rif.amount, a.estimatedRewards.rbtc.amount])
+        const bValue = getCombinedFiatAmount([b.estimatedRewards.rif.amount, b.estimatedRewards.rbtc.amount])
         return aValue - bValue
       },
       totalAllocationPercentage: (a: IRewardData, b: IRewardData) =>
@@ -124,8 +125,8 @@ export const BuildersLeaderBoardTable: FC = () => {
               address,
               builderName,
               stateFlags,
-              lastCycleReward,
-              estimatedReward,
+              lastCycleRewards,
+              estimatedRewards,
               totalAllocationPercentage,
               rewardPercentage,
             }) => (
@@ -139,11 +140,11 @@ export const BuildersLeaderBoardTable: FC = () => {
                 <BackerRewardsPercentage tableHeader={tableHeaders[1]} percentage={rewardPercentage} />
                 <LazyRewardCell
                   tableHeader={tableHeaders[2]}
-                  rewards={[lastCycleReward.rbtc, lastCycleReward.rif]}
+                  rewards={[lastCycleRewards.rbtc, lastCycleRewards.rif]}
                 />
                 <LazyRewardCell
                   tableHeader={tableHeaders[3]}
-                  rewards={[estimatedReward.rbtc, estimatedReward.rif]}
+                  rewards={[estimatedRewards.rbtc, estimatedRewards.rif]}
                 />
                 <TotalAllocationCell tableHeader={tableHeaders[4]} percentage={totalAllocationPercentage} />
                 <ActionCell tableHeader={tableHeaders[5]} builderAddress={address} />

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,8 @@ 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,13 +2,12 @@ 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'
@@ -31,8 +30,7 @@ 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, symbol, currency)
 
   return (
     <MetricsCard borderless>
@@ -47,7 +45,7 @@ export const TotalAllocationsMetrics: FC<TotalAllocationsProps> = ({
         TokenMetricsCardRow,
         'min-h-0 grow-0',
       )({
-        amount: `${totalAllocationsInHuman} STRIF`,
+        amount,
         fiatAmount,
         isLoading,
       })}

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

@@ -4,7 +4,6 @@ import {
   BackerRewardsContextProvider,
   useGetBackerRewards,
 } from '@/app/collective-rewards/rewards'
-import { BuilderContextProviderWithPrices } from '@/app/collective-rewards/user'
 import {
   ISortConfig,
   TableHeader,
@@ -15,7 +14,7 @@ import {
   TotalAllocationCell,
 } from '@/app/collective-rewards/shared'
 import { TableBody, TableCore, TableHead, TableRow } from '@/components/Table'
-import { useHandleErrors } from '@/app/collective-rewards/utils'
+import { getCombinedFiatAmount, useHandleErrors } from '@/app/collective-rewards/utils'
 import { LoadingSpinner } from '@/components/LoadingSpinner'
 import { useBasicPaginationUi } from '@/shared/hooks/usePaginationUi'
 import { CycleContextProvider } from '@/app/collective-rewards/metrics'
@@ -66,14 +65,22 @@ const RewardsTable: FC<BackerRewardsTable> = ({ builder, gauges, tokens }) => {
       rewardPercentage: (a: IRewardData, b: IRewardData) =>
         Number(a.rewardPercentage.current - b.rewardPercentage.current),
       estimatedRewards: (a: IRewardData, b: IRewardData) => {
-        return Number(a.estimatedRewards.rif.crypto.value - b.estimatedRewards.rif.crypto.value)
+        const aValue = getCombinedFiatAmount([a.estimatedRewards.rif.amount, a.estimatedRewards.rbtc.amount])
+        const bValue = getCombinedFiatAmount([b.estimatedRewards.rif.amount, b.estimatedRewards.rbtc.amount])
+        return aValue - bValue
       },
       totalAllocationPercentage: (a: IRewardData, b: IRewardData) =>
         Number(a.totalAllocationPercentage - b.totalAllocationPercentage),
-      claimableRewards: (a: IRewardData, b: IRewardData) =>
-        Number(a.claimableRewards.rif.crypto.value - b.claimableRewards.rif.crypto.value),
-      allTimeRewards: (a: IRewardData, b: IRewardData) =>
-        Number(a.allTimeRewards.rif.crypto.value - b.allTimeRewards.rif.crypto.value),
+      claimableRewards: (a: IRewardData, b: IRewardData) => {
+        const aValue = getCombinedFiatAmount([a.claimableRewards.rif.amount, a.claimableRewards.rbtc.amount])
+        const bValue = getCombinedFiatAmount([b.claimableRewards.rif.amount, b.claimableRewards.rbtc.amount])
+        return aValue - bValue
+      },
+      allTimeRewards: (a: IRewardData, b: IRewardData) => {
+        const aValue = getCombinedFiatAmount([a.allTimeRewards.rif.amount, a.allTimeRewards.rbtc.amount])
+        const bValue = getCombinedFiatAmount([b.allTimeRewards.rif.amount, b.allTimeRewards.rbtc.amount])
+        return aValue - bValue
+      },
     }
     return Object.values(rewardsData).toSorted((a: IRewardData, b: IRewardData) => {
       const { key, direction } = sortConfig

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'
@@ -45,11 +44,9 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
   useHandleErrors({ error: error, title: 'Error loading all time rewards' })
 
   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/backers/hooks/useGetBackerRewards.ts

@@ -5,13 +5,12 @@ import {
   useGetBackersRewardPercentage,
   RifSvg,
   RbtcSvg,
-  BuilderRewardPercentage,
   TokenRewards,
+  BackerRewardPercentage,
 } from '@/app/collective-rewards/rewards'
 import { useGaugesGetFunction } from '@/app/collective-rewards/shared'
 import { Address } from 'viem'
 import { usePricesContext } from '@/shared/context/PricesContext'
-import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import { useGetBuildersByState } from '@/app/collective-rewards//user'
 import { Builder, BuilderStateFlags } from '@/app/collective-rewards/types'
 import { useMemo } from 'react'
@@ -21,20 +20,16 @@ export type BackerRewards = {
   builderName: string
   stateFlags: BuilderStateFlags
   totalAllocationPercentage: bigint
-  rewardPercentage: BuilderRewardPercentage
+  rewardPercentage: BackerRewardPercentage
   estimatedRewards: TokenRewards
   claimableRewards: TokenRewards
   allTimeRewards: TokenRewards
 }
 
 const tokenRewardsMetrics = (tokenRewards: TokenBackerRewards, gauge: Address) => {
-  const estimatedRewards = Number(formatBalanceToHuman(tokenRewards.estimated[gauge] ?? 0n))
-  const earned = Number(formatBalanceToHuman(tokenRewards.earned[gauge] ?? 0n))
-  const claimed = Number(
-    formatBalanceToHuman(
-      tokenRewards.claimed[gauge]?.reduce((acc, value) => acc + value.args.amount_, 0n) ?? 0n,
-    ),
-  )
+  const estimatedRewards = tokenRewards.estimated[gauge] ?? 0n
+  const earned = tokenRewards.earned[gauge] ?? 0n
+  const claimed = tokenRewards.claimed[gauge]?.reduce((acc, value) => acc + value.args.amount_, 0n) ?? 0n
 
   return {
     claimableRewards: earned,
@@ -121,72 +116,60 @@ export const useGetBackerRewards = (
             rewardPercentage,
             estimatedRewards: {
               rif: {
-                crypto: {
+                amount: {
                   value: rifRewards.estimatedRewards,
                   symbol: rif.symbol,
-                },
-                fiat: {
-                  value: rifPrice * rifRewards.estimatedRewards,
-                  symbol: currency,
+                  price: rifPrice,
+                  currency,
                 },
                 logo: RifSvg(),
               },
               rbtc: {
-                crypto: {
+                amount: {
                   value: rbtcRewards.estimatedRewards,
                   symbol: rbtc.symbol,
-                },
-                fiat: {
-                  value: rbtcPrice * rbtcRewards.estimatedRewards,
-                  symbol: currency,
+                  price: rbtcPrice,
+                  currency,
                 },
                 logo: RbtcSvg(),
               },
             },
             claimableRewards: {
               rif: {
-                crypto: {
+                amount: {
                   value: rifRewards.claimableRewards,
                   symbol: rif.symbol,
-                },
-                fiat: {
-                  value: rifPrice * rifRewards.claimableRewards,
-                  symbol: currency,
+                  price: rifPrice,
+                  currency,
                 },
                 logo: RifSvg(),
               },
               rbtc: {
-                crypto: {
+                amount: {
                   value: rbtcRewards.claimableRewards,
                   symbol: rbtc.symbol,
-                },
-                fiat: {
-                  value: rbtcPrice * rbtcRewards.claimableRewards,
-                  symbol: currency,
+                  price: rbtcPrice,
+                  currency,
                 },
                 logo: RbtcSvg(),
               },
             },
             allTimeRewards: {
               rif: {
-                crypto: {
+                amount: {
                   value: rifRewards.allTimeRewards,
                   symbol: rif.symbol,
-                },
-                fiat: {
-                  value: rifPrice * rifRewards.allTimeRewards,
-                  symbol: currency,
+                  price: rifPrice,
+                  currency,
                 },
                 logo: RifSvg(),
               },
               rbtc: {
-                crypto: {
+                amount: {
                   value: rbtcRewards.allTimeRewards,
                   symbol: rbtc.symbol,
-                },
-                fiat: {
-                  value: rbtcPrice * rbtcRewards.allTimeRewards,
-                  symbol: currency,
+                  price: rbtcPrice,
+                  currency,
                 },
                 logo: RbtcSvg(),
               },