UI changes

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">
@@ -275,7 +278,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)}
@@ -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 />

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>
+  )
+}

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>

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

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>
     </>
   )

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>

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 }
+}