From 4cedabe0d558fdfde940f40ca692958987bc8a87 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Wed, 4 Dec 2024 16:06:43 +0100
Subject: [PATCH 1/8] Change naming

---
 centrifuge-app/src/components/LoanList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx
index 711103b6d4..51bd645ec3 100644
--- a/centrifuge-app/src/components/LoanList.tsx
+++ b/centrifuge-app/src/components/LoanList.tsx
@@ -275,7 +275,7 @@ export function LoanList({ loans, snapshots }: Props) {
             <Checkbox
               label={
                 <Text color="textSecondary" variant="body2">
-                  Show repaid assets
+                  Show closed assets
                 </Text>
               }
               onChange={(e) => setShowRepaid(!showRepaid)}

From 71c6a9a756e7c519e90f79d8dd6b7fea131e526d Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Tue, 10 Dec 2024 15:48:17 +0100
Subject: [PATCH 2/8] Update pool list view for archived

---
 .../src/components/PoolCard/PoolListView.tsx  | 43 +++++++++++++++++++
 centrifuge-app/src/components/PoolList.tsx    |  5 ++-
 2 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 centrifuge-app/src/components/PoolCard/PoolListView.tsx

diff --git a/centrifuge-app/src/components/PoolCard/PoolListView.tsx b/centrifuge-app/src/components/PoolCard/PoolListView.tsx
new file mode 100644
index 0000000000..c94ecc7ed8
--- /dev/null
+++ b/centrifuge-app/src/components/PoolCard/PoolListView.tsx
@@ -0,0 +1,43 @@
+import { Box, Grid, Text } from '@centrifuge/fabric'
+import { useTheme } from 'styled-components'
+import { PoolCardProps } from '.'
+import { formatBalance, formatPercentage } from '../../../src/utils/formatting'
+import { PoolStatus } from './PoolStatus'
+
+export const PoolListView = ({
+  poolId,
+  assetClass,
+  valueLocked,
+  iconUri,
+  tranches,
+  name,
+  currencySymbol,
+  status,
+  createdAt,
+  ...pool
+}: PoolCardProps) => {
+  const theme = useTheme()
+  const calculateApy = () => {
+    const APR = tranches?.find((tranche) => tranche.interestRatePerSec)?.interestRatePerSec
+    if (APR) return formatPercentage(APR.toAprPercent(), true, {}, 1)
+    else return '-'
+  }
+  return (
+    <Grid
+      gridTemplateColumns={['24px 1fr 1fr 1fr 70px 70px']}
+      alignItems="center"
+      border={`1px solid ${theme.colors.borderPrimary}`}
+      borderRadius={8}
+      padding={2}
+      boxShadow={`0 -1px 0 ${theme.colors.borderPrimary}`}
+      gap={1}
+    >
+      <Box as="img" width="iconMedium" height="iconMedium" src={iconUri} borderRadius={4} />
+      <Text variant="body2">{name}</Text>
+      <Text variant="body2">{assetClass}</Text>
+      <Text variant="body2">{formatBalance(valueLocked || 0, currencySymbol)}</Text>
+      <Text>{calculateApy()}</Text>
+      <PoolStatus status={status} />
+    </Grid>
+  )
+}
diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
index 5becd2238a..ea08acccf9 100644
--- a/centrifuge-app/src/components/PoolList.tsx
+++ b/centrifuge-app/src/components/PoolList.tsx
@@ -9,6 +9,7 @@ import { TinlakePool } from '../utils/tinlake/useTinlakePools'
 import { useListedPools } from '../utils/useListedPools'
 import { useMetadataMulti } from '../utils/useMetadata'
 import { PoolCard, PoolCardProps } from './PoolCard'
+import { PoolListView } from './PoolCard/PoolListView'
 import { PoolStatusKey } from './PoolCard/PoolStatus'
 import { filterPools } from './PoolFilter/utils'
 
@@ -118,10 +119,10 @@ export function PoolList() {
 function ArchivedPools({ pools }: { pools: PoolCardProps[] }) {
   return (
     <Stack gap={1} overflow="auto">
-      <Grid columns={[1, 2, 2, 3]} as="ul" role="list" gap={3}>
+      <Grid columns={[1]} as="ul" role="list" gap={1}>
         {pools.map((pool) => (
           <PoolCardBox as="li" key={pool.poolId} status={pool.status}>
-            <PoolCard {...pool} isArchive />
+            <PoolListView {...pool} />
           </PoolCardBox>
         ))}
       </Grid>

From 67af376affb81f7de457c63fb7ae7a68446fcf36 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Tue, 10 Dec 2024 15:48:29 +0100
Subject: [PATCH 3/8] Update IPFS hash

archived pools blockchain tower
---
 centrifuge-app/src/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/centrifuge-app/src/config.ts b/centrifuge-app/src/config.ts
index e4e0f0d1e9..03d72cb7df 100644
--- a/centrifuge-app/src/config.ts
+++ b/centrifuge-app/src/config.ts
@@ -104,7 +104,7 @@ export const ethConfig = {
   chainId: 1,
   poolRegistryAddress: '0xcA11bde05977b3631167028862bE2a173976CA11',
   tinlakeUrl: 'https://tinlake.centrifuge.io',
-  poolsHash: 'QmaMA1VYSKuuYhBcQCyf5Ek4VoiiEG6oLGp3iGbsQPGpkS', // TODO: add registry to config and fetch poolHash
+  poolsHash: 'QmXJZjBMvW8Qgqt82zAbAKYSBV5u91JsC8uHfF2eR2uAZA', // TODO: add registry to config and fetch poolHash
   blockExplorerUrl: 'https://etherscan.io',
   network: ethNetwork,
   multicallContractAddress: '0xcA11bde05977b3631167028862bE2a173976CA11', // Same for all networks

From 00ebccdf288b7f3fb07e9546bb766f0cacb7dee4 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Tue, 10 Dec 2024 15:57:09 +0100
Subject: [PATCH 4/8] Add loader to assets table

---
 centrifuge-app/src/components/LoanList.tsx    | 29 ++++++++++---------
 .../src/pages/Pool/Assets/index.tsx           |  2 +-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx
index 51bd645ec3..cb204e25b6 100644
--- a/centrifuge-app/src/components/LoanList.tsx
+++ b/centrifuge-app/src/components/LoanList.tsx
@@ -29,8 +29,8 @@ import { useMetadata } from '../utils/useMetadata'
 import { useCentNFT } from '../utils/useNFTs'
 import { usePool, usePoolMetadata } from '../utils/usePools'
 import { Column, DataTable, SortableTableHeader } from './DataTable'
-import { LoadBoundary } from './LoadBoundary'
 import { prefetchRoute } from './Root'
+import { Spinner } from './Spinner'
 
 type Row = (Loan | TinlakeLoan) & {
   idSortKey: number
@@ -47,9 +47,10 @@ type Row = (Loan | TinlakeLoan) & {
 type Props = {
   loans: Loan[] | TinlakeLoan[]
   snapshots: AssetSnapshot[]
+  isLoading: boolean
 }
 
-export function LoanList({ loans, snapshots }: Props) {
+export function LoanList({ loans, snapshots, isLoading }: Props) {
   const { pid: poolId } = useParams<{ pid: string }>()
   if (!poolId) throw new Error('Pool not found')
 
@@ -266,6 +267,8 @@ export function LoanList({ loans, snapshots }: Props) {
 
   const csvUrl = React.useMemo(() => csvData && getCSVDownloadUrl(csvData as any), [csvData])
 
+  if (isLoading) return <Spinner />
+
   return (
     <>
       <Box pt={1} pb={2} paddingX={1} display="flex" justifyContent="space-between" alignItems="center">
@@ -304,18 +307,16 @@ export function LoanList({ loans, snapshots }: Props) {
       </Box>
       <PaginationContainer pagination={pagination}>
         <Stack gap={2}>
-          <LoadBoundary>
-            <Box overflow="auto">
-              <DataTable
-                data={showRepaid ? rows : rows.filter((row) => !row?.marketValue?.isZero())}
-                columns={columns}
-                onRowClicked={(row) => `${basePath}/${poolId}/assets/${row.id}`}
-                pageSize={20}
-                page={pagination.page}
-                defaultSortKey="maturityDate"
-              />
-            </Box>
-          </LoadBoundary>
+          <Box overflow="auto">
+            <DataTable
+              data={showRepaid ? rows : rows.filter((row) => !row?.marketValue?.isZero())}
+              columns={columns}
+              onRowClicked={(row) => `${basePath}/${poolId}/assets/${row.id}`}
+              pageSize={20}
+              page={pagination.page}
+              defaultSortKey="maturityDate"
+            />
+          </Box>
           {pagination.pageCount > 1 && (
             <Box alignSelf="center">
               <Pagination />
diff --git a/centrifuge-app/src/pages/Pool/Assets/index.tsx b/centrifuge-app/src/pages/Pool/Assets/index.tsx
index b9ebfc843e..ffc089c64a 100644
--- a/centrifuge-app/src/pages/Pool/Assets/index.tsx
+++ b/centrifuge-app/src/pages/Pool/Assets/index.tsx
@@ -132,7 +132,7 @@ export function PoolDetailAssets() {
         <CreateAssetButton poolId={poolId} />
       </PageSummary>
       <Box paddingX={3}>
-        <LoanList loans={loans} snapshots={snapshots} />
+        <LoanList loans={loans} snapshots={snapshots} isLoading={isLoadingSnapshots || isLoading} />
       </Box>
     </>
   )

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 5/8] 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 }
+}

From c0cc058c7056917771280eaa1fb282577cc66a73 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Wed, 11 Dec 2024 10:35:07 +0100
Subject: [PATCH 6/8] Update centrifuge-app/src/pages/Pools.tsx

Co-authored-by: Onno Visser <visser.onno@gmail.com>
---
 centrifuge-app/src/pages/Pools.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/centrifuge-app/src/pages/Pools.tsx b/centrifuge-app/src/pages/Pools.tsx
index 0a62be2c3b..6980882079 100644
--- a/centrifuge-app/src/pages/Pools.tsx
+++ b/centrifuge-app/src/pages/Pools.tsx
@@ -27,7 +27,7 @@ export default function PoolsPage() {
           <Box mt={40}>
             <Box display="flex">
               <Text color="#82888D" variant="body2" style={{ marginRight: 8 }}>
-                Total assets finance
+                Total assets financed
               </Text>
             </Box>
             <Text as="h1" variant="heading1" style={{ fontSize: 36 }}>

From bbbc6dc78f062ecd8a1f70ec39f51527f38873f7 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Thu, 12 Dec 2024 10:25:18 +0100
Subject: [PATCH 7/8] Revert to TVL

---
 centrifuge-app/src/pages/Pools.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/centrifuge-app/src/pages/Pools.tsx b/centrifuge-app/src/pages/Pools.tsx
index 6980882079..90273f5612 100644
--- a/centrifuge-app/src/pages/Pools.tsx
+++ b/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>

From b6805145a5eb9cf0871e66c7c21505cb18eeb079 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Thu, 12 Dec 2024 10:28:46 +0100
Subject: [PATCH 8/8] fix import

---
 centrifuge-app/src/pages/Pools.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/centrifuge-app/src/pages/Pools.tsx b/centrifuge-app/src/pages/Pools.tsx
index 90273f5612..1d938c1c65 100644
--- a/centrifuge-app/src/pages/Pools.tsx
+++ b/centrifuge-app/src/pages/Pools.tsx
@@ -1,7 +1,7 @@
 import { Box, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
-import { Dec } from 'src/utils/Decimal'
-import { formatBalance } from 'src/utils/formatting'
+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'