From 557c24d1b88a5a186d777fad8e78dc639cb0c1a6 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Wed, 11 Dec 2024 10:03:07 +0100
Subject: [PATCH] Add total assets finance

---
 centrifuge-app/src/pages/Pools.tsx         | 26 +++++-------------
 centrifuge-app/src/utils/useListedPools.ts | 32 ++++++++++++++++++++++
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/centrifuge-app/src/pages/Pools.tsx b/centrifuge-app/src/pages/Pools.tsx
index 0b734ca111..0a62be2c3b 100644
--- a/centrifuge-app/src/pages/Pools.tsx
+++ b/centrifuge-app/src/pages/Pools.tsx
@@ -1,34 +1,22 @@
-import { formatBalance } from '@centrifuge/centrifuge-react'
 import { Box, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
-import { useListedPools } from '../../src/utils/useListedPools'
+import { Spinner } from '../../src/components/Spinner'
+import { useTotalAssetsFinanced } from '../../src/utils/useListedPools'
 import { LayoutSection } from '../components/LayoutBase/LayoutSection'
 import { PoolList } from '../components/PoolList'
 import { prefetchRoute } from '../components/Root'
 import { config } from '../config'
-import { Dec } from '../utils/Decimal'
 
 export default function PoolsPage() {
-  const [, listedTokens] = useListedPools()
-
-  const totalValueLocked = React.useMemo(() => {
-    return (
-      listedTokens
-        ?.map((tranche) => ({
-          valueLocked: tranche.totalIssuance
-            .toDecimal()
-            .mul(tranche.tokenPrice?.toDecimal() ?? Dec(0))
-            .toNumber(),
-        }))
-        .reduce((prev, curr) => prev.add(curr.valueLocked), Dec(0)) ?? Dec(0)
-    )
-  }, [listedTokens])
+  const { sumBorrowedAmount, isLoading } = useTotalAssetsFinanced()
 
   React.useEffect(() => {
     prefetchRoute('/pools/1')
     prefetchRoute('/pools/tokens')
   }, [])
 
+  if (isLoading) return <Spinner />
+
   return (
     <LayoutSection>
       <Stack>
@@ -39,11 +27,11 @@ export default function PoolsPage() {
           <Box mt={40}>
             <Box display="flex">
               <Text color="#82888D" variant="body2" style={{ marginRight: 8 }}>
-                Total value locked (TVL)
+                Total assets finance
               </Text>
             </Box>
             <Text as="h1" variant="heading1" style={{ fontSize: 36 }}>
-              {formatBalance(totalValueLocked ?? 0, config.baseCurrency)}
+              {sumBorrowedAmount} {config.baseCurrency}
             </Text>
           </Box>
         </Stack>
diff --git a/centrifuge-app/src/utils/useListedPools.ts b/centrifuge-app/src/utils/useListedPools.ts
index 48f69decc9..a215e76441 100644
--- a/centrifuge-app/src/utils/useListedPools.ts
+++ b/centrifuge-app/src/utils/useListedPools.ts
@@ -8,6 +8,7 @@ import { useMetadataMulti } from '../utils/useMetadata'
 import { usePermissions } from '../utils/usePermissions'
 import { usePools } from '../utils/usePools'
 import { Dec } from './Decimal'
+import { formatBalanceAbbreviated } from './formatting'
 import { getPoolTVL } from './getPoolTVL'
 import { useTinlakePools } from './tinlake/useTinlakePools'
 import { useSubquery } from './useSubquery'
@@ -17,6 +18,13 @@ type FlattenedDataItem = {
   decimals: number
 }
 
+type Pool = {
+  sumBorrowedAmount: CurrencyBalance
+  currency: {
+    decimals: number
+  }
+}
+
 const sign = (n: BN) => (n.isZero() ? 0 : n.isNeg() ? -1 : 1)
 
 export function useListedPools() {
@@ -129,3 +137,27 @@ export function useYearOverYearGrowth() {
 
   return { totalYoyGrowth, isLoading }
 }
+
+export function useTotalAssetsFinanced() {
+  const { data, isLoading } = useSubquery(
+    `query {
+      pools {
+        nodes {
+         sumBorrowedAmount
+         currency {
+          decimals
+         }
+        }
+      }
+    }`
+  )
+
+  const pools = data?.pools?.nodes
+
+  const sumBorrowedAmount = pools?.reduce((accumulator: Decimal, pool: Pool) => {
+    const total = new CurrencyBalance(pool.sumBorrowedAmount || 0, pool.currency.decimals)
+    return accumulator.add(total.toDecimal())
+  }, Dec(0))
+
+  return { sumBorrowedAmount: formatBalanceAbbreviated(sumBorrowedAmount || 0), isLoading }
+}