TOK-410: all time share

src/app/collective-rewards/actions.ts

@@ -1,8 +1,9 @@
 import { Address } from 'viem'
-import { SimplifiedRewardDistributorAddress } from '@/lib/contracts'
+import { BackersManagerAddress, SimplifiedRewardDistributorAddress } from '@/lib/contracts'
 import { axiosInstance } from '@/lib/utils'
 import {
   fetchBuilderRewardsClaimedLogsByAddress,
+  fetchGaugeNotifyRewardLogsByAddress,
   fetchNotifyRewardLogsByAddress,
   fetchRewardDistributedLogsByAddress,
 } from '@/lib/endpoints'
@@ -18,9 +19,17 @@ export const fetchRewardDistributedLogs = (fromBlock = 0) => {
 export const fetchRewardDistributedCached = () =>
   axiosInstance.get('/reward-distributed/api', { baseURL: '/' })
 
-export const fetchNotifyRewardLogs = (gaugeAddress: Address, fromBlock = 0) => {
+export const fetchNotifyRewardLogs = (fromBlock = 0) => {
   return axiosInstance.get(
     fetchNotifyRewardLogsByAddress
+      .replace('{{address}}', BackersManagerAddress)
+      .replace('{{fromBlock}}', fromBlock.toString()),
+  )
+}
+
+export const fetchGaugeNotifyRewardLogs = (gaugeAddress: Address, fromBlock = 0) => {
+  return axiosInstance.get(
+    fetchGaugeNotifyRewardLogsByAddress
       .replace('{{address}}', gaugeAddress)
       .replace('{{fromBlock}}', fromBlock.toString()),
   )

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

@@ -2,7 +2,6 @@ import {
   formatMetrics,
   MetricsCard,
   MetricsCardTitle,
-  MetricsCardWithSpinner,
   TokenMetricsCardRow,
   useGetBuilderRewards,
   useGetBuilderRewardsClaimedLogs,

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

@@ -0,0 +1,90 @@
+import { Address } from 'viem'
+import { FC, ReactNode } from 'react'
+import {
+  useGetNotifyRewardLogs,
+  useGetGaugeNotifyRewardLogs,
+  useGetBuilderRewards,
+  MetricsCardWithSpinner,
+  MetricsCardTitle,
+} from '@/app/collective-rewards/rewards'
+import { useHandleErrors } from '@/app/collective-rewards/utils'
+import { Typography } from '@/components/Typography'
+
+type AllTimeShareProps = {
+  gauge: Address
+  data: {
+    [token: string]: {
+      symbol: string
+      address: Address
+    }
+  }
+}
+
+type MetricsCardContentProps = {
+  children: ReactNode
+}
+
+const MetricsCardContent: FC<MetricsCardContentProps> = ({ children }) => (
+  <Typography
+    tagVariant="h2"
+    paddingBottom="2px"
+    paddingTop="10px"
+    lineHeight="28.8px"
+    fontFamily="kk-topo"
+    className="text-[48px] text-primary font-normal"
+    data-testid="Amount"
+  >
+    {children}
+  </Typography>
+)
+
+export const AllTimeShare: FC<AllTimeShareProps> = ({ gauge, data: { rif } }) => {
+  const { data: rewardsPerToken, isLoading: logsLoading, error: rewardsError } = useGetNotifyRewardLogs()
+  const {
+    data: gaugeRewardsPerToken,
+    isLoading: gaugeLogsLoading,
+    error: gaugeRewardsError,
+  } = useGetGaugeNotifyRewardLogs(gauge)
+  const {
+    data: claimableRewards,
+    isLoading: claimableRewardsLoading,
+    error: claimableRewardsError,
+  } = useGetBuilderRewards(rif.address, gauge)
+
+  const error = rewardsError ?? gaugeRewardsError ?? claimableRewardsError
+
+  useHandleErrors({ error, title: 'Error loading all time share' })
+
+  let isLoading: boolean = logsLoading || gaugeLogsLoading || claimableRewardsLoading
+
+  if (!rewardsPerToken[rif.address] || !gaugeRewardsPerToken[rif.address]) {
+    return (
+      <MetricsCardWithSpinner isLoading={isLoading} borderless>
+        <MetricsCardTitle title="All time share" data-testid="AllTimeShare" />
+        <MetricsCardContent>0%</MetricsCardContent>
+      </MetricsCardWithSpinner>
+    )
+  }
+
+  const rifRewards = rewardsPerToken[rif.address].reduce((acc, event) => {
+    const amount = event.args.amount_
+    return acc + amount
+  }, 0n)
+  const gaugeRifRewards = gaugeRewardsPerToken[rif.address].reduce((acc, event) => {
+    const amount = event.args.builderAmount_
+    return acc + amount
+  }, 0n)
+
+  const totalRewards = gaugeRifRewards + (claimableRewards ?? 0n)
+
+  const amount = !rifRewards ? '0%' : `${(totalRewards * 100n) / rifRewards}%`
+
+  return (
+    <MetricsCardWithSpinner isLoading={isLoading} borderless>
+      <div className="flex flex-col gap-y-[10px]">
+        <MetricsCardTitle title="All time share" data-testid="AllTimeShare" />
+        <MetricsCardContent>{amount}</MetricsCardContent>
+      </div>
+    </MetricsCardWithSpinner>
+  )
+}

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

@@ -5,7 +5,7 @@ import {
   MetricsCard,
   MetricsCardTitle,
   TokenMetricsCardRow,
-  useGetNotifyRewardLogs,
+  useGetGaugeNotifyRewardLogs,
 } from '@/app/collective-rewards/rewards'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
 import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
@@ -29,7 +29,11 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
   currency = 'USD',
 }) => {
   const { data: cycle, isLoading: cycleLoading, error: cycleError } = useCycleContext()
-  const { data: rewardsPerToken, isLoading: logsLoading, error: rewardsError } = useGetNotifyRewardLogs(gauge)
+  const {
+    data: rewardsPerToken,
+    isLoading: logsLoading,
+    error: rewardsError,
+  } = useGetGaugeNotifyRewardLogs(gauge)
 
   const error = cycleError ?? rewardsError
   useHandleErrors({ error, title: 'Error loading last cycle rewards' })

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

@@ -9,6 +9,7 @@ import {
   ClaimableRewards,
   AllTimeRewards,
   EstimatedRewards,
+  AllTimeShare,
 } from '@/app/collective-rewards/rewards'
 import { CycleContextProvider } from '@/app/collective-rewards/metrics'
 import { PricesContextProvider } from '@/shared/context/PricesContext'
@@ -51,7 +52,7 @@ export const Rewards: FC<{ builder: Address; gauge: Address }> = ({ builder, gau
               <LastCycleRewards gauge={gauge} data={data} />
               <EstimatedRewards gauge={gauge} data={data} />
               <AllTimeRewards gauge={gauge} data={data} />
-              <div>All time share</div>
+              <AllTimeShare gauge={gauge} data={data} />
               <Popover
                 disabled={isClaimFunctionReady}
                 content={

src/app/collective-rewards/rewards/hooks/useGetNotifyRewardLogs.ts

@@ -1,32 +1,69 @@
 import { useQuery } from '@tanstack/react-query'
-import { fetchNotifyRewardLogs } from '@/app/collective-rewards/actions'
+import { fetchGaugeNotifyRewardLogs, fetchNotifyRewardLogs } from '@/app/collective-rewards/actions'
 import { Address, getAddress, parseEventLogs } from 'viem'
 import { GaugeAbi } from '@/lib/abis/v2/GaugeAbi'
+import { BackersManagerAbi } from '@/lib/abis/v2/BackersManagerAbi'
+import { BackersManagerAddress } from '@/lib/contracts'
 import { AVERAGE_BLOCKTIME } from '@/lib/constants'
 
-export type NotifyRewardEventLog = ReturnType<typeof parseEventLogs<typeof GaugeAbi, true, 'NotifyReward'>>
+export type NotifyRewardEventLog = ReturnType<
+  typeof parseEventLogs<typeof BackersManagerAbi, true, 'NotifyReward'>
+>
 
 export type NotifyRewardsPerToken = Record<Address, NotifyRewardEventLog>
 
-export const useGetNotifyRewardLogs = (gauge: Address) => {
+export const useGetNotifyRewardLogs = () => {
   const { data, error, isLoading } = useQuery({
     queryFn: async () => {
-      const { data } = await fetchNotifyRewardLogs(gauge)
+      const { data } = await fetchNotifyRewardLogs()
 
       const events = parseEventLogs({
-        abi: GaugeAbi,
+        abi: BackersManagerAbi,
         logs: data,
         eventName: 'NotifyReward',
       })
 
       return events.reduce<NotifyRewardsPerToken>((acc, log) => {
         const rewardToken = getAddress(log.args.rewardToken_)
         acc[rewardToken] = [...(acc[rewardToken] || []), log]
+        return acc
+      }, {})
+    },
+    queryKey: ['notifyRewardLogs', BackersManagerAddress],
+    refetchInterval: AVERAGE_BLOCKTIME,
+    initialData: {},
+  })
+
+  return {
+    data,
+    error,
+    isLoading,
+  }
+}
+
+export type GaugeNotifyRewardEventLog = ReturnType<
+  typeof parseEventLogs<typeof GaugeAbi, true, 'NotifyReward'>
+>
+export type GaugeNotifyRewardsPerToken = Record<Address, GaugeNotifyRewardEventLog>
 
+export const useGetGaugeNotifyRewardLogs = (gauge: Address) => {
+  const { data, error, isLoading } = useQuery({
+    queryFn: async () => {
+      const { data } = await fetchGaugeNotifyRewardLogs(gauge)
+
+      const events = parseEventLogs({
+        abi: GaugeAbi,
+        logs: data,
+        eventName: 'NotifyReward',
+      })
+
+      return events.reduce<GaugeNotifyRewardsPerToken>((acc, log) => {
+        const rewardToken = getAddress(log.args.rewardToken_)
+        acc[rewardToken] = [...(acc[rewardToken] || []), log]
         return acc
       }, {})
     },
-    queryKey: ['notifyRewardLogs'],
+    queryKey: ['notifyRewardLogs', gauge],
     refetchInterval: AVERAGE_BLOCKTIME,
     initialData: {},
   })

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

@@ -6,3 +6,4 @@ export * from './LastCycleRewards'
 export * from './ClaimableRewards'
 export * from './AllTimeRewards'
 export * from './EstimatedRewards'
+export * from './AllTimeShare'

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

@@ -1,13 +1,13 @@
-import { NotifyRewardEventLog } from '@/app/collective-rewards/rewards'
+import { GaugeNotifyRewardEventLog } from '@/app/collective-rewards/rewards'
 import { Cycle } from '@/app/collective-rewards/metrics/context/CycleContext'
 
-type Log = NotifyRewardEventLog[number]
+type Log = GaugeNotifyRewardEventLog[number]
 type CycleRewards = {
   builderAmount: bigint
   backersAmount: bigint
 }
 
-export const getLastCycleRewards = (cycle: Cycle, notifyRewardLogs?: NotifyRewardEventLog) => {
+export const getLastCycleRewards = (cycle: Cycle, notifyRewardLogs?: GaugeNotifyRewardEventLog) => {
   const { cycleDuration, endDistributionWindow, cycleStart } = cycle
   const distributionWindow = endDistributionWindow.diff(cycleStart)
   const lastCycleStart = cycleStart.minus({ millisecond: +cycleDuration })

src/app/user/page.tsx

@@ -9,7 +9,7 @@ import { withBuilderButton, useGetBuilderToGauge } from '@/app/collective-reward
 import { TxStatusMessage } from '@/components/TxStatusMessage'
 import { zeroAddress } from 'viem'
 import { useHandleErrors } from '@/app/collective-rewards/utils'
-import { DelegationSection } from './Delegation'
+import { DelegationSection } from '@/app/user/Delegation'
 
 type MyHoldingsProps = {
   showBuilderButton?: boolean

src/lib/endpoints.ts

@@ -26,8 +26,11 @@ export const getNftHolders = `/nfts/{{address}}/holders?chainId=${CHAIN_ID}`
 const REWARD_DISTRIBUTED_EVENT = '0x57ea5c7c295b52ef3b06c69661d59c8a6d9c602ac5355cfe5e54e303c139f270'
 export const fetchRewardDistributedLogsByAddress = `/address/{{address}}/eventsByTopic0?topic0=${REWARD_DISTRIBUTED_EVENT}&chainId=${CHAIN_ID}&fromBlock={{fromBlock}}`
 
-const NOTIFY_REWARD_EVENT = '0x3c0f5c48b0ffa2c570c1a0f4fbf7b0f8982213afff9eb42cd258ead865cf3c9d'
+const NOTIFY_REWARD_EVENT = 'f70d5c697de7ea828df48e5c4573cb2194c659f1901f70110c52b066dcf50826'
 export const fetchNotifyRewardLogsByAddress = `/address/{{address}}/eventsByTopic0?topic0=${NOTIFY_REWARD_EVENT}&chainId=${CHAIN_ID}&fromBlock={{fromBlock}}`
 
+const GAUGE_NOTIFY_REWARD_EVENT = '0x3c0f5c48b0ffa2c570c1a0f4fbf7b0f8982213afff9eb42cd258ead865cf3c9d'
+export const fetchGaugeNotifyRewardLogsByAddress = `/address/{{address}}/eventsByTopic0?topic0=${GAUGE_NOTIFY_REWARD_EVENT}&chainId=${CHAIN_ID}&fromBlock={{fromBlock}}`
+
 const BUILDER_REWARDS_CLAIMED_EVENT = 'c309438e69ba53ef6afef64839bd1ab1acc4a9a8fd28c8e0356075ca66f72c1b'
 export const fetchBuilderRewardsClaimedLogsByAddress = `/address/{{address}}/eventsByTopic0?topic0=${BUILDER_REWARDS_CLAIMED_EVENT}&chainId=${CHAIN_ID}&fromBlock={{fromBlock}}`