Merge pull request #1552 from oasisprotocol/mz/consensusEvents

Prepare components and API for Consensus events sections

.changelog/1552.trivial.md

@@ -0,0 +1 @@
+Prepare components and API for Consensus events sections

src/app/components/ConsensusEvents/ConsensusEventDetails.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ConsensusEvent } from '../../../oasis-nexus/api'
+import { SearchScope } from '../../../types/searchScope'
+import { TransactionLink } from '../Transactions/TransactionLink'
+
+const ConsensusEventDetailsContent: FC<{
+  event: ConsensusEvent
+}> = ({ event }) => {
+  // TODO: Handle specific event types. Implement new UI or re-use layout used in runtimes
+  return (
+    <div>
+      <b>{event.type}</b>
+      <br />
+      <pre>{JSON.stringify(event, null, ' ')}</pre>
+    </div>
+  )
+}
+
+export const ConsensusEventDetails: FC<{
+  scope: SearchScope
+  event: ConsensusEvent
+  showTxHash: boolean
+}> = ({ scope, event, showTxHash }) => {
+  const { t } = useTranslation()
+  return (
+    <div>
+      <ConsensusEventDetailsContent event={event} />
+      {showTxHash && event.tx_hash && (
+        <p>
+          {t('event.fields.emittingTransaction')}:{' '}
+          <TransactionLink scope={scope} alwaysTrim hash={event.tx_hash} />
+        </p>
+      )}
+    </div>
+  )
+}

src/app/components/ConsensusEvents/ConsensusEventsList.tsx

@@ -1,5 +1,39 @@
 import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import { SearchScope } from '../../../types/searchScope'
+import { ConsensusEvent } from '../../../oasis-nexus/api'
+import { TablePagination, TablePaginationProps } from '../Table/TablePagination'
+import { CardEmptyState } from '../CardEmptyState'
+import { TextSkeleton } from '../Skeleton'
+import { ConsensusEventDetails } from './ConsensusEventDetails'
 
-export const ConsensusEventsList: FC = () => {
-  return <>{/* TODO: waits for new designs */}</>
+export const ConsensusEventsList: FC<{
+  scope: SearchScope
+  events: ConsensusEvent[] | undefined
+  isLoading: boolean
+  isError: boolean
+  pagination: false | TablePaginationProps
+  showTxHash: boolean
+}> = ({ scope, events, isLoading, isError, pagination, showTxHash }) => {
+  const { t } = useTranslation()
+  return (
+    <>
+      {isError && <CardEmptyState label={t('event.cantLoadEvents')} />}
+      {isLoading && <TextSkeleton numberOfRows={10} />}
+      {events &&
+        events.map((event, index) => (
+          <div key={`event-${index}`}>
+            {index > 0 && <Divider variant="card" />}
+            <ConsensusEventDetails scope={scope} event={event} showTxHash={showTxHash} />
+          </div>
+        ))}
+      {pagination && (
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <TablePagination {...pagination} />
+        </Box>
+      )}
+    </>
+  )
 }

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -440,7 +440,7 @@ export const RuntimeEventDetails: FC<{
       <RuntimeEventDetailsInner scope={scope} event={event} addressSwitchOption={addressSwitchOption} />
       {showTxHash && event.tx_hash && (
         <p>
-          {t('runtimeEvent.fields.emittingTransaction')}:{' '}
+          {t('event.fields.emittingTransaction')}:{' '}
           <TransactionLink scope={event} alwaysTrim hash={event.eth_tx_hash || event.tx_hash} />
         </p>
       )}

src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx

@@ -22,7 +22,7 @@ export const RuntimeEventsDetailedList: FC<{
   const { t } = useTranslation()
   return (
     <>
-      {isError && <CardEmptyState label={t('runtimeEvent.cantLoadEvents')} />}
+      {isError && <CardEmptyState label={t('event.cantLoadEvents')} />}
       {isLoading && <TextSkeleton numberOfRows={10} />}
       {events &&
         events.map((event, index) => (

src/app/components/Transactions/ConsensusTransactionEvents.tsx

@@ -1,9 +1,49 @@
 import { FC } from 'react'
-import { Transaction } from '../../../oasis-nexus/api'
+import { useTranslation } from 'react-i18next'
+import { Transaction, useGetConsensusEvents } from '../../../oasis-nexus/api'
+import { AppErrors } from '../../../types/errors'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
 import { ConsensusEventsList } from '../ConsensusEvents/ConsensusEventsList'
+import { useSearchParamsPagination } from '../Table/useSearchParamsPagination'
+import { EmptyState } from '../EmptyState'
 
 export const ConsensusTransactionEvents: FC<{
   transaction: Transaction
-}> = () => {
-  return <ConsensusEventsList />
+}> = ({ transaction }) => {
+  const { t } = useTranslation()
+  const pagination = useSearchParamsPagination('page')
+  const offset = (pagination.selectedPage - 1) * limit
+  const eventsQuery = useGetConsensusEvents(transaction.network, {
+    tx_hash: transaction.hash,
+    limit,
+    offset,
+  })
+  const { isFetched, isLoading, data, isError } = eventsQuery
+  const events = data?.data.events
+  if (isFetched && pagination.selectedPage > 1 && !events?.length) {
+    throw AppErrors.PageDoesNotExist
+  }
+
+  if (!events?.length && isFetched) {
+    return (
+      <EmptyState description={t('event.cantFindMatchingEvents')} title={t('event.noEvents')} light={true} />
+    )
+  }
+
+  return (
+    <ConsensusEventsList
+      scope={transaction}
+      events={events}
+      isLoading={isLoading}
+      isError={isError}
+      pagination={{
+        selectedPage: pagination.selectedPage,
+        linkToPage: pagination.linkToPage,
+        totalCount: data?.data.total_count,
+        isTotalCountClipped: data?.data.is_total_count_clipped,
+        rowsPerPage: limit,
+      }}
+      showTxHash={false}
+    />
+  )
 }

src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountEventsCard.tsx

@@ -1,17 +1,63 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useGetConsensusEvents } from '../../../oasis-nexus/api'
+import { AppErrors } from '../../../types/errors'
 import { ConsensusEventsList } from '../../components/ConsensusEvents/ConsensusEventsList'
 import { ConsensusAccountDetailsContext } from './hooks'
-import { LinkableCardLayout } from 'app/components/LinkableCardLayout'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
+import { LinkableCardLayout } from '../../components/LinkableCardLayout'
+import { useSearchParamsPagination } from '../..//components/Table/useSearchParamsPagination'
+import { EmptyState } from '../../components/EmptyState'
 
 export const eventsContainerId = 'events'
 
-export const ConsensusAccountEventsCard: FC<ConsensusAccountDetailsContext> = () => {
+export const ConsensusAccountEventsList: FC<ConsensusAccountDetailsContext> = ({ scope, address }) => {
+  const { t } = useTranslation()
+  const pagination = useSearchParamsPagination('page')
+  const offset = (pagination.selectedPage - 1) * limit
+  const eventsQuery = useGetConsensusEvents(scope.network, {
+    rel: address,
+    limit,
+    offset,
+  })
+  const { isFetched, isLoading, data, isError } = eventsQuery
+  const events = data?.data.events
+  if (isFetched && pagination.selectedPage > 1 && !events?.length) {
+    throw AppErrors.PageDoesNotExist
+  }
+
+  if (!events?.length && isFetched) {
+    return (
+      <EmptyState description={t('event.cantFindMatchingEvents')} title={t('event.noEvents')} light={true} />
+    )
+  }
+
+  return (
+    <LinkableCardLayout containerId={eventsContainerId} title={t('common.events')}>
+      <ConsensusEventsList
+        scope={scope}
+        events={events}
+        isLoading={isLoading}
+        isError={isError}
+        pagination={{
+          selectedPage: pagination.selectedPage,
+          linkToPage: pagination.linkToPage,
+          totalCount: data?.data.total_count,
+          isTotalCountClipped: data?.data.is_total_count_clipped,
+          rowsPerPage: limit,
+        }}
+        showTxHash
+      />
+    </LinkableCardLayout>
+  )
+}
+
+export const ConsensusAccountEventsCard: FC<ConsensusAccountDetailsContext> = ({ scope, address }) => {
   const { t } = useTranslation()
 
   return (
     <LinkableCardLayout containerId={eventsContainerId} title={t('common.events')}>
-      <ConsensusEventsList />
+      <ConsensusAccountEventsList scope={scope} address={address} />
     </LinkableCardLayout>
   )
 }

src/app/pages/ConsensusBlockDetailPage/ConsensusBlockEventsCard.tsx

@@ -1,17 +1,63 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ConsensusEventsList } from '../../components/ConsensusEvents/ConsensusEventsList'
+import { useGetConsensusEvents } from '../../../oasis-nexus/api'
+import { AppErrors } from '../../../types/errors'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
+import { LinkableCardLayout } from '../../components/LinkableCardLayout'
+import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
+import { EmptyState } from '../../components/EmptyState'
 import { ConsensusBlockDetailsContext } from '.'
-import { LinkableCardLayout } from 'app/components/LinkableCardLayout'
+import { ConsensusEventsList } from '../../components/ConsensusEvents/ConsensusEventsList'
 
 export const eventsContainerId = 'events'
 
-export const ConsensusBlockEventsCard: FC<ConsensusBlockDetailsContext> = () => {
+const ConsensusBlockEventsList: FC<ConsensusBlockDetailsContext> = ({ scope, blockHeight }) => {
+  const { t } = useTranslation()
+  const pagination = useSearchParamsPagination('page')
+  const offset = (pagination.selectedPage - 1) * limit
+  const eventsQuery = useGetConsensusEvents(scope.network, {
+    block: blockHeight,
+    limit,
+    offset,
+  })
+  const { isFetched, isLoading, data, isError } = eventsQuery
+  const events = data?.data.events
+  if (isFetched && pagination.selectedPage > 1 && !events?.length) {
+    throw AppErrors.PageDoesNotExist
+  }
+
+  if (!events?.length && isFetched) {
+    return (
+      <EmptyState description={t('event.cantFindMatchingEvents')} title={t('event.noEvents')} light={true} />
+    )
+  }
+
+  return (
+    <LinkableCardLayout containerId={eventsContainerId} title={t('common.events')}>
+      <ConsensusEventsList
+        scope={scope}
+        events={events}
+        isLoading={isLoading}
+        isError={isError}
+        pagination={{
+          selectedPage: pagination.selectedPage,
+          linkToPage: pagination.linkToPage,
+          totalCount: data?.data.total_count,
+          isTotalCountClipped: data?.data.is_total_count_clipped,
+          rowsPerPage: limit,
+        }}
+        showTxHash
+      />
+    </LinkableCardLayout>
+  )
+}
+
+export const ConsensusBlockEventsCard: FC<ConsensusBlockDetailsContext> = ({ scope, blockHeight }) => {
   const { t } = useTranslation()
 
   return (
     <LinkableCardLayout containerId={eventsContainerId} title={t('common.events')}>
-      <ConsensusEventsList />
+      <ConsensusBlockEventsList scope={scope} blockHeight={blockHeight} />
     </LinkableCardLayout>
   )
 }

src/app/pages/RuntimeBlockDetailPage/RuntimeBlockEventsCard.tsx

@@ -34,11 +34,7 @@ const EventsList: FC<RuntimeBlockDetailsContext> = ({ scope, blockHeight }) => {
 
   if (!events?.length && !isLoading) {
     return (
-      <EmptyState
-        description={t('runtimeEvent.cantFindMatchingEvents')}
-        title={t('runtimeEvent.noEvents')}
-        light={true}
-      />
+      <EmptyState description={t('event.cantFindMatchingEvents')} title={t('event.noEvents')} light={true} />
     )
   }
 

src/locales/en/translation.json

@@ -463,10 +463,15 @@
       "recipientTooltipUnavailable": "Recipient not available in selected address format"
     }
   },
-  "runtimeEvent": {
+  "event": {
     "cantLoadEvents": "Unfortunately we couldn't load the list of events. Please try again later.",
-    "noEvents": "No events",
     "cantFindMatchingEvents": "We can't find any matching events.",
+    "noEvents": "No events",
+    "fields": {
+      "emittingTransaction": "Transaction"
+    }
+  },
+  "runtimeEvent": {
     "accountsburn": "Tokens burnt",
     "accountsmint": "Tokens minted",
     "accountstransfer": "Transfer",
@@ -485,7 +490,6 @@
       "amount": "Amount",
       "data": "Data",
       "emittingContract": "Emitting contract",
-      "emittingTransaction": "Transaction",
       "topics": "Topics",
       "owner": "Owner",
       "activeShares": "Active Shares",

src/oasis-nexus/api.ts

@@ -75,6 +75,10 @@ declare module './generated/api' {
     layer: Layer
   }
 
+  export interface ConsensusEvent {
+    network: Network
+  }
+
   export interface EvmToken {
     network: Network
     layer: Layer
@@ -877,6 +881,44 @@ export const useGetRuntimeEvents: typeof generated.useGetRuntimeEvents = (
   })
 }
 
+export const useGetConsensusEvents: typeof generated.useGetConsensusEvents = (network, params, options) => {
+  return generated.useGetConsensusEvents(network, params, {
+    ...options,
+    request: {
+      ...options?.request,
+      transformResponse: [
+        ...arrayify(axios.defaults.transformResponse),
+        (data: generated.ConsensusEventList, headers, status) => {
+          if (status !== 200) return data
+          return {
+            ...data,
+            events: data.events.map(event => {
+              return {
+                ...event,
+                body: {
+                  ...event.body,
+                  // staking.transfer, staking.escrow.take, staking.escrow.reclaim, staking.escrow.debonding_start, staking.escrow.add
+                  amount: event.body.amount ? fromBaseUnits(event.body.amount, consensusDecimals) : undefined,
+                  // staking.allowance_change
+                  allowance: event.body.allowance
+                    ? fromBaseUnits(event.body.allowance, consensusDecimals)
+                    : undefined,
+                  // staking.allowance_change
+                  amount_change: event.body.amount_change
+                    ? fromBaseUnits(event.body.amount_change, consensusDecimals)
+                    : undefined,
+                },
+                network,
+              }
+            }),
+          }
+        },
+        ...arrayify(options?.request?.transformResponse),
+      ],
+    },
+  })
+}
+
 export const useGetRuntimeEvmTokensAddressHolders: typeof generated.useGetRuntimeEvmTokensAddressHolders = (
   network,
   runtime,