add report

sdk-consumer/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@centrifuge/fabric": "workspace:*",
-    "@centrifuge/sdk": "0.0.0-alpha.0",
+    "@centrifuge/sdk": "0.0.0-alpha.3",
     "@talismn/wagmi-connector": "^0.3.1",
     "@tanstack/react-query": "^5.59.16",
     "@wagmi/core": "^2.15.2",

sdk-consumer/src/App.tsx

@@ -1,7 +1,9 @@
-import { FabricProvider, centrifugeTheme } from '@centrifuge/fabric'
+import { FabricProvider, Stack, Tabs, TabsItem, centrifugeTheme } from '@centrifuge/fabric'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
 import { WagmiProvider } from 'wagmi'
 import { Invest } from './components/Invest'
+import { Report } from './components/Report'
 import { TransactionProvider } from './components/Transactions/TransactionsProvider'
 import { wagmiConfig } from './config/wagmiConfig'
 
@@ -13,10 +15,24 @@ export function App() {
       <TransactionProvider>
         <WagmiProvider config={wagmiConfig}>
           <QueryClientProvider client={queryClient}>
-            <Invest />
+            <Page />
           </QueryClientProvider>
         </WagmiProvider>
       </TransactionProvider>
     </FabricProvider>
   )
 }
+
+function Page() {
+  const [selectedTab, setSelectedTab] = useState(0)
+
+  return (
+    <Stack gap={2}>
+      <Tabs selectedIndex={selectedTab} onChange={(index) => setSelectedTab(index)}>
+        <TabsItem>Invest</TabsItem>
+        <TabsItem>Some report</TabsItem>
+      </Tabs>
+      {[<Invest />, <Report />][selectedTab]}
+    </Stack>
+  )
+}

sdk-consumer/src/components/Invest.tsx

@@ -1,6 +1,6 @@
 import { Button, Card, CurrencyInput, Shelf, Spinner, Stack, Text } from '@centrifuge/fabric'
-import { PoolNetwork, Vault } from '@centrifuge/sdk'
-import { useEffect, useRef, useState } from 'react'
+import { Vault } from '@centrifuge/sdk'
+import { useEffect, useState } from 'react'
 import { useAccount } from 'wagmi'
 import { useCentrifugeTransaction } from '../hooks/useCentrifugeTransaction'
 import { useActiveNetworks, useVaultInvestment, useVaults } from '../hooks/usePool'
@@ -11,12 +11,8 @@ const trancheId = '0xac6bffc5fd68f7772ceddec7b0a316ca'
 
 export function Invest() {
   const { data: networks, isLoading } = useActiveNetworks(poolId)
-  const ref = useRef<PoolNetwork[]>()
-  if ((networks?.length ?? 0) > (ref.current?.length ?? 0)) {
-    ref.current = networks
-  }
   return (
-    <Card maxWidth={400} mx="auto" p={2} backgroundColor="backgroundSecondary">
+    <Card alignSelf="center" p={2} backgroundColor="backgroundSecondary">
       <Stack gap={2}>
         {isLoading ? (
           <Shelf justifyContent="center">
@@ -25,7 +21,7 @@ export function Invest() {
         ) : (
           <>
             <Text variant="heading1">Invest</Text>
-            <ConnectionGuard networks={ref.current?.map((n) => n.chainId) || []}>
+            <ConnectionGuard networks={networks?.map((n) => n.chainId) || []}>
               <InvestInner />
             </ConnectionGuard>
           </>

sdk-consumer/src/components/Report.tsx

@@ -0,0 +1,45 @@
+import { Grid, GridRow, Shelf, Spinner, Stack, Text } from '@centrifuge/fabric'
+import { useBalanceSheet } from '../hooks/useReport'
+
+const poolId = '2779829532'
+
+export function Report() {
+  const { data, isLoading, isError } = useBalanceSheet(poolId)
+
+  return (
+    <Stack gap={2}>
+      {isLoading ? (
+        <Shelf justifyContent="center">
+          <Spinner />
+        </Shelf>
+      ) : isError ? (
+        <Shelf justifyContent="center">Data failed to load</Shelf>
+      ) : (
+        <Grid columns={5} width={1} gap={1}>
+          <GridRow>
+            <Text>Date</Text>
+            <Text>Net asset value</Text>
+            <Text>Onchain reserve</Text>
+            <Text>Offchain cash</Text>
+            <Text>Accrued fees</Text>
+          </GridRow>
+          {data?.map((entry) => (
+            <GridRow key={entry.timestamp}>
+              <Text>
+                {new Date(entry.timestamp).toLocaleString('en', {
+                  year: 'numeric',
+                  month: 'numeric',
+                  day: 'numeric',
+                })}
+              </Text>
+              <Text>{entry.netAssetValue.toFloat().toFixed(2)} USD</Text>
+              <Text>{entry.onchainReserve.toFloat().toFixed(2)} USD</Text>
+              <Text>{entry.offchainCash.toFloat().toFixed(2)} USD</Text>
+              <Text>{entry.accruedFees.toFloat().toFixed(2)} USD</Text>
+            </GridRow>
+          ))}
+        </Grid>
+      )}
+    </Stack>
+  )
+}

sdk-consumer/src/hooks/useCentrifugeQuery.ts

@@ -65,6 +65,9 @@ function useObservable<ObservableType extends Observable<any>>(observable?: Obse
             ...result,
             status: entry.didEmitData ? 'success' : 'error',
           }
+          if (result.error) {
+            console.error(result.error)
+          }
         }),
         // Share the observable to prevent unsubscribing and resubscribing between the immediate subscription and the useSyncExternalStore subscription.
         share({

sdk-consumer/src/hooks/usePool.ts

@@ -4,18 +4,25 @@ import { switchMap } from 'rxjs'
 import { centrifuge } from '../centrifuge'
 import { useCentrifugeQuery } from './useCentrifugeQuery'
 
-const poolId = '2779829532'
-const trancheId = '0xac6bffc5fd68f7772ceddec7b0a316ca'
+const poolIds = ['2779829532', '2853787339', '2118311035', '3783664923', '4139607887']
 
-function usePools() {
-  const [pools] = useState(() => [new Pool(centrifuge, poolId)])
+export function usePools() {
+  const [pools] = useState(() => poolIds.map((pid) => new Pool(centrifuge, pid)))
   return pools
 }
 
+export function usePool(poolId: string) {
+  const pools = usePools()
+  const pool = pools.find((p) => p.id === poolId)
+  if (!pool) {
+    throw new Error(`Pool with id ${poolId} not found`)
+  }
+  return pool
+}
+
 export function useActiveNetworks(poolId: string) {
   const pool = usePools().find((p) => p.id === poolId)
   const networks$ = useMemo(() => {
-    console.log('getActiveNetworks $$', pool)
     return pool?.activeNetworks()
   }, [pool])
   return useCentrifugeQuery(networks$)

sdk-consumer/src/hooks/useReport.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react'
+import { useCentrifugeQuery } from './useCentrifugeQuery'
+import { usePool } from './usePool'
+
+export function useBalanceSheet(poolId: string) {
+  const pool = usePool(poolId)
+
+  const report$ = useMemo(() => pool?.reports.balanceSheet({ to: new Date().toISOString() }), [pool])
+
+  return useCentrifugeQuery(report$)
+}