Revert to TVL

centrifuge-app/src/pages/Pools.tsx

@@ -1,22 +1,34 @@
 import { Box, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
-import { Spinner } from '../../src/components/Spinner'
-import { useTotalAssetsFinanced } from '../../src/utils/useListedPools'
+import { Dec } from 'src/utils/Decimal'
+import { formatBalance } from 'src/utils/formatting'
+import { useListedPools } from '../../src/utils/useListedPools'
 import { LayoutSection } from '../components/LayoutBase/LayoutSection'
 import { PoolList } from '../components/PoolList'
 import { prefetchRoute } from '../components/Root'
 import { config } from '../config'
 
 export default function PoolsPage() {
-  const { sumBorrowedAmount, isLoading } = useTotalAssetsFinanced()
+  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])
 
   React.useEffect(() => {
     prefetchRoute('/pools/1')
     prefetchRoute('/pools/tokens')
   }, [])
 
-  if (isLoading) return <Spinner />
-
   return (
     <LayoutSection>
       <Stack>
@@ -27,11 +39,11 @@ export default function PoolsPage() {
           <Box mt={40}>
             <Box display="flex">
               <Text color="#82888D" variant="body2" style={{ marginRight: 8 }}>
-                Total assets financed
+                Total value locked (TVL)
               </Text>
             </Box>
             <Text as="h1" variant="heading1" style={{ fontSize: 36 }}>
-              {sumBorrowedAmount} {config.baseCurrency}
+              {formatBalance(totalValueLocked ?? 0, config.baseCurrency)}
             </Text>
           </Box>
         </Stack>