work in progress YOY

centrifuge-app/src/pages/Pools.tsx

@@ -1,7 +1,7 @@
 import { formatBalance } from '@centrifuge/centrifuge-react'
-import { Box, IconArrowUpRight, Stack, StatusChip, Text } from '@centrifuge/fabric'
+import { Box, IconArrowDown, IconArrowUpRight, Stack, StatusChip, Text } from '@centrifuge/fabric'
 import * as React from 'react'
-import { useListedPools } from '../../src/utils/useListedPools'
+import { useListedPools, useYearOverYearGrowth } from '../../src/utils/useListedPools'
 import { LayoutSection } from '../components/LayoutBase/LayoutSection'
 import { PoolList } from '../components/PoolList'
 import { prefetchRoute } from '../components/Root'
@@ -10,6 +10,9 @@ import { Dec } from '../utils/Decimal'
 
 export default function PoolsPage() {
   const [, listedTokens] = useListedPools()
+  const { totalValueLockedGrowth } = useYearOverYearGrowth()
+  const isPositiveYoy = totalValueLockedGrowth > 0
+  const IconComponent = isPositiveYoy ? IconArrowUpRight : IconArrowDown
 
   const totalValueLocked = React.useMemo(() => {
     return (
@@ -41,12 +44,14 @@ export default function PoolsPage() {
               <Text color="textDisabled" variant="body2" style={{ marginRight: 8 }}>
                 Total value locked (TVL)
               </Text>
-              <StatusChip status="ok">
-                <IconArrowUpRight size={16} color="ok" />
-                <Text variant="body3" color="ok">
-                  24% YoY
-                </Text>
-              </StatusChip>
+              {totalValueLockedGrowth != 0 && (
+                <StatusChip status={isPositiveYoy ? 'ok' : 'critical'}>
+                  <IconComponent size={16} color="ok" />
+                  <Text variant="body3" color={isPositiveYoy ? 'ok' : 'warning'}>
+                    {formatBalance(totalValueLockedGrowth ?? 0, '', 2)} YoY
+                  </Text>
+                </StatusChip>
+              )}
             </Box>
             <Text as="h1" variant="heading1" color="textBlack" style={{ fontSize: 36 }}>
               {formatBalance(totalValueLocked ?? 0, config.baseCurrency)}

centrifuge-app/src/utils/useListedPools.ts

@@ -1,12 +1,14 @@
 import { PoolMetadata } from '@centrifuge/centrifuge-js'
 import BN from 'bn.js'
 import * as React from 'react'
+import { useMemo } from 'react'
 import { useAddress } from '../utils/useAddress'
 import { useMetadataMulti } from '../utils/useMetadata'
 import { usePermissions } from '../utils/usePermissions'
 import { usePools } from '../utils/usePools'
 import { getPoolTVL } from './getPoolTVL'
 import { useTinlakePools } from './tinlake/useTinlakePools'
+import { useSubquery } from './useSubquery'
 
 const sign = (n: BN) => (n.isZero() ? 0 : n.isNeg() ? -1 : 1)
 
@@ -40,3 +42,86 @@ export function useListedPools() {
 
   return [listedPools, listedTokens, isLoading] as const
 }
+
+export function useYearOverYearGrowth() {
+  const { currentYearStart, previousYearStart } = useMemo(() => {
+    const startOfDayToday = new Date()
+    startOfDayToday.setHours(0, 0, 0, 0)
+
+    return {
+      currentYearStart: startOfDayToday.toISOString(),
+      previousYearStart: new Date(new Date().getFullYear() - 1, 0, 1).toISOString(),
+    }
+  }, [])
+
+  const { data } = useSubquery(
+    `query ($currentYearStart: Datetime!, $previousYearStart: Datetime!) {
+      pools {
+        nodes {
+          poolSnapshots(
+            filter: {
+              timestamp: {
+                greaterThan: $previousYearStart,
+                lessThan: $currentYearStart
+              }
+            },
+          ) {
+            nodes {
+              netAssetValue
+              totalReserve
+              timestamp
+            }
+          }
+        }
+      }
+    }`,
+    {
+      currentYearStart,
+      previousYearStart,
+    },
+    {
+      enabled: !!currentYearStart && !!previousYearStart,
+    }
+  )
+
+  const pools = data?.pools?.nodes
+
+  const flattenedData = pools?.flatMap((pool: any) => pool.poolSnapshots.nodes) || []
+
+  const groupedByYear = flattenedData.reduce((acc: any, snapshot: any) => {
+    const year = new Date(snapshot.timestamp).getFullYear()
+
+    if (!acc[year]) {
+      acc[year] = []
+    }
+
+    acc[year].push(snapshot)
+
+    return acc
+  }, {})
+
+  const years = Object.keys(groupedByYear).sort()
+  const previousYear = groupedByYear[years[0]]
+  const currentYear = groupedByYear[years[1]]
+
+  function getTotalValueLocked(pools: any) {
+    return pools
+      ?.reduce((sum: any, pool: any) => {
+        return sum.add(new BN(pool.netAssetValue)).add(new BN(pool.totalReserve))
+      }, new BN(0))
+      .div(new BN(10).pow(new BN(24)))
+      .toString()
+  }
+
+  const totalValueLocked = getTotalValueLocked(currentYear) ?? 0
+  const totalValueLockedOneYearAgo = getTotalValueLocked(previousYear) ?? 0
+
+  const totalValueLockedGrowth =
+    previousYear && currentYear
+      ? ((parseFloat(totalValueLocked) - parseFloat(totalValueLockedOneYearAgo)) /
+          parseFloat(totalValueLockedOneYearAgo)) *
+        100
+      : 0
+
+  return { totalValueLockedGrowth }
+}