POD indexer reports

centrifuge-app/package.json

@@ -33,12 +33,14 @@
     "@ethersproject/contracts": "^5.6.0",
     "@ethersproject/providers": "^5.6.0",
     "@makerdao/multicall": "^0.12.0",
-    "@polkadot/react-identicon": "~3.1.4",
+    "@polkadot/react-identicon": "^2.12.1",
     "@styled-system/css": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
     "@subwallet/wallet-connect": "^0.2.6",
     "@web3modal/standalone": "^2.4.2",
     "bn.js": "^5.2.1",
+    "chart.js": "^4.3.0",
+    "form-data": "^4.0.0",
     "formik": "^2.4.5",
     "merkletreejs": "^0.3.11",
     "react": "^18.2.0",

centrifuge-app/src/components/PodIndexerReports/index.tsx

@@ -0,0 +1,113 @@
+import { PoolMetadata, TokenBalance } from '@centrifuge/centrifuge-js'
+import { formatBalance, useCentrifuge } from '@centrifuge/centrifuge-react'
+import { Box, Card, Stack, Text } from '@centrifuge/fabric'
+import Chart from 'chart.js/auto'
+import * as React from 'react'
+import { useQuery } from 'react-query'
+import { usePool, usePoolMetadata } from '../../utils/usePools'
+
+type Props = {
+  page: keyof Exclude<PoolMetadata['reports'], undefined>
+  poolId: string
+}
+
+export function PodIndexerReports({ page, poolId }: Props) {
+  const pool = usePool(poolId)
+  const { data: metadata } = usePoolMetadata(pool)
+  const centrifuge = useCentrifuge()
+  const { data } = useQuery(
+    ['podIndexerReports', page],
+    async () => {
+      const realData = await centrifuge.pod.getReports([metadata!.pod!.indexer![0], metadata as any, page])
+      return realData
+    },
+    {
+      enabled: !!metadata?.reports,
+    }
+  )
+
+  const sectionsWithData =
+    data && metadata?.reports?.[page].sections.map((s) => ({ ...s, data: (data as any)[s.aggregate] }))
+
+  return sectionsWithData ? <ReportSections sections={sectionsWithData} /> : null
+}
+
+type ReportSectionWithData = Required<PoolMetadata>['reports']['poolOverview']['sections'][0] & { data: any }
+
+type ChartData = Record<`key${number}` | `value${number}`, any>[]
+
+function displayChart(reportSection: ReportSectionWithData, data: ChartData, node: HTMLCanvasElement) {
+  const filtered = data.filter((d) => d.value0 != null)
+  return new Chart(node, {
+    ...reportSection.viewData,
+    data: {
+      labels: filtered.map((row) => row.value0),
+      datasets: [
+        {
+          data: filtered.map((row) => new TokenBalance(row.value1, reportSection.viewData.decimals || 0).toFloat()),
+          backgroundColor: '#2762ff',
+        },
+      ],
+    },
+
+    options: {
+      ...reportSection.viewData.options,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+    },
+  })
+}
+
+function ReportSections({ sections }: { sections: ReportSectionWithData[] }) {
+  return sections.map((section) => (
+    <Box>{section.view === 'chart' ? <ChartSection section={section} /> : <CounterSection section={section} />}</Box>
+  ))
+}
+
+Chart.defaults.borderColor = '#eee'
+Chart.defaults.color = 'rgb(97, 97, 97)'
+
+function ChartSection({ section }: { section: ReportSectionWithData }) {
+  const ref = React.useRef<HTMLCanvasElement>(null)
+
+  React.useEffect(() => {
+    const chart = displayChart(section, section.data, ref.current!)
+    return () => {
+      chart.destroy()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <Card p={3} height="100%">
+      <Stack gap={3}>
+        <Text variant="heading5">{section.name}</Text>
+        <Box textAlign="center">
+          <canvas ref={undefined} />
+        </Box>
+      </Stack>
+    </Card>
+  )
+}
+
+function CounterSection({ section }: { section: ReportSectionWithData }) {
+  return (
+    <Card p={3} height="100%">
+      <Stack gap={3}>
+        <Text variant="heading5">{section.name}</Text>
+        <Stack textAlign="center" gap={2}>
+          <Text variant="heading1" fontSize="60px">
+            {formatBalance(
+              new TokenBalance(section.data[0].value0, section.viewData.decimals || 0),
+              section.viewData.symbol
+            )}
+          </Text>
+          <Text variant="heading6">{section.viewData.label}</Text>
+        </Stack>
+      </Stack>
+    </Card>
+  )
+}

centrifuge-app/src/pages/Pool/Overview/index.tsx

@@ -10,6 +10,7 @@ import { IssuerSection } from '../../../components/IssuerSection'
 import { LayoutBase } from '../../../components/LayoutBase'
 import { LayoutSection } from '../../../components/LayoutBase/LayoutSection'
 import { LoadBoundary } from '../../../components/LoadBoundary'
+import { PodIndexerReports } from '../../../components/PodIndexerReports'
 import { Cashflows } from '../../../components/PoolOverview/Cashflows'
 import { KeyMetrics } from '../../../components/PoolOverview/KeyMetrics'
 import { PoolPerformance } from '../../../components/PoolOverview/PoolPerfomance'
@@ -151,10 +152,10 @@ export function PoolDetailOverview() {
                   }) || []
                 }
               />
+              {metadata?.reports && 'poolOverview' in metadata?.reports && (
+                <PodIndexerReports poolId={poolId} page="poolOverview" />
+              )}
             </React.Suspense>
-            {/* <React.Suspense fallback={<Spinner />}>
-                <AssetsByMaturity />
-              </React.Suspense> */}
           </Grid>
           {isMedium && (
             <React.Suspense fallback={<Spinner />}>

centrifuge-js/src/modules/pod.ts

@@ -1,5 +1,6 @@
 import { u8aToHex } from '@polkadot/util'
 import { decodeAddress } from '@polkadot/util-crypto'
+import { PoolMetadata } from './pools'
 
 type JobResponse = {
   JobID: string
@@ -106,6 +107,53 @@ export function getPodModule() {
     return res as T
   }
 
+  async function callIndexer<T = any>(indexerUrl: string, query: string, variables?: any) {
+    const res = await fetch(indexerUrl, {
+      method: 'POST',
+      body: JSON.stringify({ query, variables }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }).then(async (res) => {
+      const { data, errors } = await res.json()
+      if (errors?.length) {
+        throw errors
+      }
+      return data as T
+    })
+    return res as T
+  }
+
+  async function getReports(
+    args: [
+      indexerUrl: string,
+      poolMetadata: Required<Pick<PoolMetadata, 'aggregates' | 'reports'>>,
+      page?: keyof Exclude<PoolMetadata['reports'], undefined>
+    ]
+  ) {
+    const [indexerUrl, poolMetadata, page] = args
+    const aggregateNames = Array.from(
+      new Set(
+        (page ? [poolMetadata.reports[page]] : Object.values(poolMetadata.reports)).flatMap((page) =>
+          page.sections.map((s) => s.aggregate)
+        )
+      )
+    )
+    const res = await callIndexer(
+      indexerUrl,
+      `query {
+          aggregations {
+            ${aggregateNames.map(
+              (n) => `${n}
+            `
+            )}
+          }
+        }`,
+      {}
+    )
+    return res.aggregations
+  }
+
   async function getJob(args: [podUrl: string, token: string, jobId: string]) {
     const [podUrl, token, jobId] = args
     const res = await callPod<JobResponse>(podUrl, `v2/jobs/${jobId}`, 'get', token)
@@ -232,5 +280,6 @@ export function getPodModule() {
     getInvestorAccess,
     awaitJob,
     getSelf,
+    getReports,
   }
 }

centrifuge-js/src/modules/pools.ts

@@ -691,7 +691,7 @@ export type PoolMetadata = {
   }
   pod?: {
     node: string | null
-    indexer?: string | null
+    indexer?: string[] | null
   }
   tranches: Record<
     string,
@@ -704,6 +704,17 @@ export type PoolMetadata = {
     id: string
     createdAt: string
   }[]
+  aggregates?: Record<string, Record<string, object>[]>
+  reports?: {
+    poolOverview: {
+      sections: {
+        name: string
+        aggregate: string
+        view: 'chart' | 'table' | 'counter'
+        viewData: any
+      }[]
+    }
+  }
   adminMultisig?: {
     signers: string[]
     threshold: number

centrifuge-react/package.json

@@ -52,7 +52,7 @@
     "@ethersproject/providers": "^5.6.0",
     "@finoa/finoa-connect-sdk": "^1.0.1",
     "@polkadot/extension-dapp": "~0.45.5",
-    "@polkadot/react-identicon": "~3.1.4",
+    "@polkadot/react-identicon": "^2.12.1",
     "@polkadot/types": "~10.12.2",
     "@subwallet/wallet-connect": "0.2.5",
     "@types/bn.js": "^5",