Merge pull request #1851 from oasisprotocol/mz/roflAppTxs

Setup ROFL app transactions card

Author: buberdds

.changelog/1851.bugfix.md

@@ -0,0 +1 @@
+Setup ROFL app transactions card

src/app/pages/RoflAppDetailsPage/RoflAppTransactionsCard.tsx

@@ -0,0 +1,61 @@
+import { FC } from 'react'
+import Box from '@mui/material/Box'
+import { useScreenSize } from '../../hooks/useScreensize'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
+import { transactionsContainerId } from '../../utils/tabAnchors'
+import { LinkableCardLayout } from '../../components/LinkableCardLayout'
+import { RuntimeTransactions } from '../../components/Transactions'
+import { RuntimeTransactionTypeFilter } from '../../components/Transactions/RuntimeTransactionTypeFilter'
+import { RoflAppDetailsContext, useRoflAppTransactions } from './hooks'
+
+export const RoflAppTransactionsCard: FC<RoflAppDetailsContext> = context => {
+  const { method, setMethod, scope } = context
+
+  const { isMobile } = useScreenSize()
+
+  return (
+    <LinkableCardLayout
+      containerId={transactionsContainerId}
+      title={
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'end',
+          }}
+        >
+          {!isMobile && (
+            <RuntimeTransactionTypeFilter layer={scope.layer} value={method} setValue={setMethod} />
+          )}
+        </Box>
+      }
+    >
+      {isMobile && (
+        <RuntimeTransactionTypeFilter layer={scope.layer} value={method} setValue={setMethod} expand />
+      )}
+      <RoflAppTransactions {...context} />
+    </LinkableCardLayout>
+  )
+}
+
+const RoflAppTransactions: FC<RoflAppDetailsContext> = ({ scope, id, method }) => {
+  const { isLoading, transactions, pagination, totalCount, isTotalCountClipped } = useRoflAppTransactions(
+    scope,
+    id,
+    method,
+  )
+  return (
+    <RuntimeTransactions
+      transactions={transactions}
+      isLoading={isLoading}
+      limit={NUMBER_OF_ITEMS_ON_SEPARATE_PAGE}
+      pagination={{
+        selectedPage: pagination.selectedPage,
+        linkToPage: pagination.linkToPage,
+        totalCount,
+        isTotalCountClipped,
+        rowsPerPage: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE,
+      }}
+      filtered={method !== 'any'}
+    />
+  )
+}

src/app/pages/RoflAppDetailsPage/hooks.tsx

@@ -1,4 +1,10 @@
+import { useOutletContext } from 'react-router-dom'
+import { useGetRuntimeRoflAppsIdTransactions, Layer } from '../../../oasis-nexus/api'
+import { AppErrors } from '../../../types/errors'
 import { SearchScope } from '../../../types/searchScope'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
+import { getRuntimeTransactionMethodFilteringParam } from '../../components/RuntimeTransactionMethod'
+import { useSearchParamsPagination } from '../..//components/Table/useSearchParamsPagination'
 
 export type RoflAppDetailsContext = {
   scope: SearchScope
@@ -7,4 +13,38 @@ export type RoflAppDetailsContext = {
   setMethod: (value: string) => void
 }
 
-// TOOD: Placeholder file for a hook used within a router. Add when details page is ready
+export const useRoflAppDetailsProps = () => useOutletContext<RoflAppDetailsContext>()
+
+export const useRoflAppTransactions = (scope: SearchScope, id: string, method: string) => {
+  const { network, layer } = scope
+  const pagination = useSearchParamsPagination('page')
+  const offset = (pagination.selectedPage - 1) * limit
+  if (layer !== Layer.sapphire) {
+    throw AppErrors.UnsupportedLayer
+  }
+
+  const query = useGetRuntimeRoflAppsIdTransactions(network, Layer.sapphire, id, {
+    limit,
+    offset: offset,
+    rel: id,
+    ...getRuntimeTransactionMethodFilteringParam(method),
+  })
+  const { isFetched, isLoading, data } = query
+  const transactions = data?.data.transactions
+
+  if (isFetched && pagination.selectedPage > 1 && !transactions?.length) {
+    throw AppErrors.PageDoesNotExist
+  }
+
+  const totalCount = data?.data.total_count
+  const isTotalCountClipped = data?.data.is_total_count_clipped
+
+  return {
+    isLoading,
+    isFetched,
+    transactions,
+    pagination,
+    totalCount,
+    isTotalCountClipped,
+  }
+}

src/oasis-nexus/api.ts

@@ -1538,3 +1538,42 @@ export const useGetRuntimeRoflAppsId: typeof generated.useGetRuntimeRoflAppsId =
     },
   })
 }
+
+export const useGetRuntimeRoflAppsIdTransactions: typeof generated.useGetRuntimeRoflAppsIdTransactions = (
+  network,
+  runtime,
+  id,
+  params?,
+  options?,
+) => {
+  return generated.useGetRuntimeRoflAppsIdTransactions(network, runtime, id, params, {
+    ...options,
+    request: {
+      ...options?.request,
+      transformResponse: [
+        ...arrayify(axios.defaults.transformResponse),
+        (data: generated.RuntimeTransactionList, headers, status) => {
+          if (status !== 200) return data
+          return {
+            ...data,
+            transactions: data.transactions.map(tx => {
+              return {
+                ...tx,
+                eth_hash: tx.eth_hash ? `0x${tx.eth_hash}` : undefined,
+                fee: fromBaseUnits(tx.fee, paraTimesConfig.sapphire.decimals),
+                fee_symbol: normalizeSymbol(tx.fee_symbol, { network, layer: runtime }),
+                charged_fee: fromBaseUnits(tx.charged_fee, paraTimesConfig.sapphire.decimals),
+                amount: tx.amount ? fromBaseUnits(tx.amount, paraTimesConfig.sapphire.decimals) : undefined,
+                amount_symbol: normalizeSymbol(tx.amount_symbol, { network, layer: runtime }),
+                layer: runtime,
+                network,
+                method: adjustRuntimeTransactionMethod(tx.method, tx.is_likely_native_token_transfer),
+              }
+            }),
+          }
+        },
+        ...arrayify(options?.request?.transformResponse),
+      ],
+    },
+  })
+}

src/routes.tsx

@@ -70,6 +70,9 @@ import { FC, useEffect } from 'react'
 import { AnalyticsConsentProvider } from './app/components/AnalyticsConsent'
 import { HighlightingContextProvider } from './app/components/HighlightingContext'
 import { useLocalSettings } from './app/hooks/useLocalSettings'
+import { InstancesCard } from './app/pages/RoflAppDetailsPage/InstancesCard'
+import { useRoflAppDetailsProps } from './app/pages/RoflAppDetailsPage/hooks'
+import { RoflAppTransactionsCard } from './app/pages/RoflAppDetailsPage/RoflAppTransactionsCard'
 
 const ScopeSpecificPart = () => {
   const { network, layer } = useRequiredScopeParam()
@@ -306,6 +309,16 @@ export const routes: RouteObject[] = [
             path: `rofl/app/:id`,
             element: <RoflAppDetailsPage />,
             loader: roflAppParamLoader(),
+            children: [
+              {
+                path: '',
+                Component: () => <RoflAppTransactionsCard {...useRoflAppDetailsProps()} />,
+              },
+              {
+                path: 'instances',
+                Component: () => <InstancesCard {...useRoflAppDetailsProps()} />,
+              },
+            ],
           },
         ],
       },