Add transaction card to instance details

Author: buberdds

.changelog/1895.bugfix.md

@@ -0,0 +1 @@
+Create ROFL app instance details page

src/app/pages/RoflAppInstanceDetailsPage/RoflAppInstanceRakTransactionsCard.tsx

@@ -0,0 +1,58 @@
+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 { RoflAppInstanceDetailsContext, useRoflAppInstanceRakTransactions } from './hooks'
+
+export const RoflAppInstanceRakTransactionsCard: FC<RoflAppInstanceDetailsContext> = 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 />
+      )}
+      <RoflAppInstanceRakTransactions {...context} />
+    </LinkableCardLayout>
+  )
+}
+
+const RoflAppInstanceRakTransactions: FC<RoflAppInstanceDetailsContext> = ({ scope, id, rak, method }) => {
+  const { isLoading, transactions, pagination, totalCount, isTotalCountClipped } =
+    useRoflAppInstanceRakTransactions(scope, id, rak, 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/RoflAppInstanceDetailsPage/hooks.tsx

@@ -1,5 +1,10 @@
 import { useOutletContext } from 'react-router-dom'
+import { Layer, useGetRuntimeRoflAppsIdInstancesRakTransactions } 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 RoflAppInstanceDetailsContext = {
   scope: SearchScope
@@ -10,3 +15,41 @@ export type RoflAppInstanceDetailsContext = {
 }
 
 export const useRoflAppInstanceDetailsProps = () => useOutletContext<RoflAppInstanceDetailsContext>()
+
+export const useRoflAppInstanceRakTransactions = (
+  scope: SearchScope,
+  id: string,
+  rak: 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 = useGetRuntimeRoflAppsIdInstancesRakTransactions(network, Layer.sapphire, id, rak, {
+    limit,
+    offset: offset,
+    ...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/routes.tsx

@@ -75,6 +75,8 @@ import { useRoflAppDetailsProps } from './app/pages/RoflAppDetailsPage/hooks'
 import { RoflAppUpdatesCard } from './app/pages/RoflAppDetailsPage/RoflAppUpdatesCard'
 import { RoflAppInstanceTransactionsCard } from 'app/pages/RoflAppDetailsPage/RoflAppInstanceTransactionsCard'
 import { RoflAppInstanceDetailsPage } from 'app/pages/RoflAppInstanceDetailsPage'
+import { useRoflAppInstanceDetailsProps } from 'app/pages/RoflAppInstanceDetailsPage/hooks'
+import { RoflAppInstanceRakTransactionsCard } from 'app/pages/RoflAppInstanceDetailsPage/RoflAppInstanceRakTransactionsCard'
 
 const ScopeSpecificPart = () => {
   const { network, layer } = useRequiredScopeParam()
@@ -330,6 +332,12 @@ export const routes: RouteObject[] = [
             path: `rofl/app/:id/instance/:rak`,
             element: <RoflAppInstanceDetailsPage />,
             loader: roflAppParamLoader(),
+            children: [
+              {
+                path: '',
+                Component: () => <RoflAppInstanceRakTransactionsCard {...useRoflAppInstanceDetailsProps()} />,
+              },
+            ],
           },
         ],
       },