feat: add events to stream details

src/pages/[_network]/streams/FlowUpdatedEventDataGrid.tsx

@@ -0,0 +1,161 @@
+import { GridColDef } from '@mui/x-data-grid'
+import {
+  FlowUpdatedEvent,
+  FlowUpdatedEvent_OrderBy,
+  Ordering,
+  PagedResult,
+  SkipPaging,
+  Stream
+} from '@superfluid-finance/sdk-core'
+import { FC, useMemo } from 'react'
+
+import AccountAddress from '../../../components/Address/AccountAddress'
+import FlowRate from '../../../components/Amount/FlowRate'
+import EtherFormatted from '../../../components/Amount/EtherFormatted'
+import { AppDataGrid } from '../../../components/DataGrid/AppDataGrid'
+import TimeAgo from '../../../components/TimeAgo/TimeAgo'
+import { TransactionHash } from '../../../components/TransactionHash/TransactionHash'
+import { useNetworkContext } from '../../../contexts/NetworkContext'
+
+interface Props {
+  stream: Stream | null | undefined
+  queryResult: {
+    isFetching: boolean
+    data?: PagedResult<FlowUpdatedEvent>
+  }
+  setPaging: (paging: SkipPaging) => void
+  ordering: Ordering<FlowUpdatedEvent_OrderBy> | undefined
+  setOrdering: (ordering?: Ordering<FlowUpdatedEvent_OrderBy>) => void
+}
+
+const FlowUpdatedEventDataGrid: FC<Props> = ({
+  stream,
+  queryResult,
+  setPaging,
+  ordering,
+  setOrdering
+}) => {
+  const network = useNetworkContext()
+
+  const rows: FlowUpdatedEvent[] = queryResult.data?.data || []
+
+  const columns: GridColDef<FlowUpdatedEvent>[] = useMemo(
+    () => [
+      { field: 'id', hide: true, sortable: false, flex: 1 },
+      {
+        field: 'timestamp',
+        headerName: 'Date',
+        sortable: true,
+        flex: 0.8,
+        renderCell: (params) => <TimeAgo subgraphTime={params.row.timestamp} />
+      },
+      {
+        field: 'type',
+        headerName: 'Type',
+        sortable: false,
+        flex: 0.5,
+        renderCell: (params) => {
+          const type = params.row.type
+          switch (type) {
+            case 0:
+              return 'Create'
+            case 1:
+              return 'Update'
+            case 2:
+              return 'Terminate'
+            default:
+              return type
+          }
+        }
+      },
+      {
+        field: 'transactionHash',
+        headerName: 'Transaction',
+        sortable: false,
+        flex: 0.8,
+        renderCell: (params) => (
+          <TransactionHash
+            network={network}
+            transactionHash={params.row.transactionHash}
+          />
+        )
+      },
+      {
+        field: 'sender',
+        headerName: 'Sender',
+        sortable: true,
+        flex: 1,
+        renderCell: (params) => (
+          <AccountAddress
+            dataCy={'sender-address'}
+            network={network}
+            address={params.row.sender}
+          />
+        )
+      },
+      {
+        field: 'receiver',
+        headerName: 'Receiver',
+        sortable: true,
+        flex: 1,
+        renderCell: (params) => (
+          <AccountAddress
+            dataCy={'receiver-address'}
+            network={network}
+            address={params.row.receiver}
+          />
+        )
+      },
+      {
+        field: 'flowRate',
+        headerName: 'Flow Rate',
+        sortable: false,
+        flex: 0.8,
+        renderCell: (params) => <FlowRate flowRate={params.row.flowRate} />
+      },
+      {
+        field: 'deposit',
+        headerName: 'Deposit',
+        sortable: false,
+        flex: 0.8,
+        renderCell: (params) => {
+          return <EtherFormatted wei={params.row.deposit} />
+        }
+      },
+      {
+        field: 'flowOperator',
+        headerName: 'Operator',
+        sortable: true,
+        flex: 1,
+        hide: true,
+        renderCell: (params) => {
+          // Only show if operator is different from sender
+          if (params.row.flowOperator === params.row.sender) {
+            return null
+          }
+          return (
+            <AccountAddress
+              dataCy={'operator-address'}
+              network={network}
+              address={params.row.flowOperator}
+            />
+          )
+        }
+      }
+    ],
+    [network]
+  )
+
+  return (
+    <AppDataGrid
+      columns={columns}
+      rows={rows}
+      queryResult={queryResult}
+      setPaging={setPaging}
+      ordering={ordering}
+      setOrdering={(x) => setOrdering(x as any)}
+    />
+  )
+}
+
+export default FlowUpdatedEventDataGrid

src/pages/[_network]/streams/StreamPageContent.tsx

@@ -35,6 +35,8 @@ import TimeAgo from '../../../components/TimeAgo/TimeAgo'
 import { Network } from '../../../redux/networks'
 import { sfSubgraph } from '../../../redux/store'
 import SubgraphQueryLink from '../../subgraph/SubgraphQueryLink'
+import { skipToken } from '@reduxjs/toolkit/query'
+import FlowUpdatedEventDataGrid from './FlowUpdatedEventDataGrid'
 
 export const StreamPageContent: FC<{ streamId: string; network: Network }> = ({
   streamId,
@@ -46,7 +48,27 @@ export const StreamPageContent: FC<{ streamId: string; network: Network }> = ({
   })
 
   const stream: Stream | null | undefined = streamQuery.data
-
+
+  const flowUpdatedEventsQuery = sfSubgraph.useFlowUpdatedEventsQuery(stream ? {
+    chainId: network.chainId,
+    filter: {
+      timestamp_gte: stream.createdAtTimestamp.toString(),
+      ...(stream.updatedAtTimestamp ? {
+        timestamp_lte: stream.updatedAtTimestamp.toString()
+      } : {}),
+      token: stream.token,
+      sender: stream.sender,
+      receiver: stream.receiver
+    },
+    order: {
+      orderBy: 'timestamp',
+      orderDirection: 'desc'
+    },
+    pagination: {
+      take: Infinity
+    }
+  } : skipToken)
+
   const [streamPeriodPaging, setStreamPeriodPaging] =
     useState<SkipPaging>(createSkipPaging())
   const [streamPeriodOrdering, setStreamPeriodOrdering] = useState<
@@ -289,6 +311,28 @@ export const StreamPageContent: FC<{ streamId: string; network: Network }> = ({
           />
         </Card>
       </Box>
+
+      <Box sx={{ mt: 3 }}>
+        <Typography variant="h5" component="h2" sx={{ mb: 1 }}>
+          Events
+          <InfoTooltipBtn
+            dataCy={'flow-events-tooltip'}
+            title="All creation, update, and deletion events for this stream"
+            size={22}
+          />
+        </Typography>
+
+        <Card elevation={2} data-cy={'flow-updated-events-grid'}>
+          <FlowUpdatedEventDataGrid
+            stream={stream}
+            queryResult={flowUpdatedEventsQuery}
+            setPaging={() => {}}
+            ordering={undefined}
+            setOrdering={() => {}}
+          />
+        </Card>
+      </Box>
+
     </Container>
   )
 }