Setup ROFL app details page

Author: buberdds

.changelog/1848.bugfix.md

@@ -0,0 +1 @@
+Enable ROFL app details page

src/app/components/ErrorDisplay/index.tsx

@@ -53,6 +53,10 @@ const errorMap: Record<AppErrors, (t: TFunction, error: ErrorPayload) => Formatt
     message: t('errors.validateURL'),
   }),
   [AppErrors.NotFoundTxHash]: t => ({ title: t('errors.notFoundTx'), message: t('errors.validateURL') }),
+  [AppErrors.NotFoundRoflApp]: t => ({
+    title: t('errors.notFoundRoflApp'),
+    message: t('errors.validateURL'),
+  }),
   [AppErrors.NotFoundProposalId]: t => ({
     title: t('errors.notFoundProposal'),
     message: t('errors.validateURL'),

src/app/pages/RoflAppDetailsPage/hooks.tsx

@@ -3,6 +3,8 @@ import { SearchScope } from '../../../types/searchScope'
 export type RoflAppDetailsContext = {
   scope: SearchScope
   id: string
+  method: string
+  setMethod: (value: string) => void
 }
 
 // TOOD: Placeholder file for a hook used within a router. Add when details page is ready

src/app/pages/RoflAppDetailsPage/index.tsx

@@ -1,13 +1,19 @@
 import { FC } from 'react'
+import { useHref, useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { formatDistanceStrict } from 'date-fns'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
-import { RoflApp } from '../../../oasis-nexus/api'
+import { Layer, RoflApp, useGetRuntimeRoflAppsId } from '../../../oasis-nexus/api'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
+import { AppErrors } from '../../../types/errors'
+import { useRequiredScopeParam } from '../../hooks/useScopeParam'
+import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
 import { useScreenSize } from '../../hooks/useScreensize'
+import { PageLayout } from '../../components/PageLayout'
+import { SubPageCard } from '../../components/SubPageCard'
 import { TextSkeleton } from '../../components/Skeleton'
 import { StyledDescriptionList } from '../../components/StyledDescriptionList'
 import { RoflAppStatusBadge } from '../../components/Rofl/RoflAppStatusBadge'
@@ -19,6 +25,55 @@ import { TeeType } from './TeeType'
 import { Endorsement } from './Endorsement'
 import { Enclaves } from './Enclaves'
 import { Secrets } from './Secrets'
+import { RouterTabs } from '../../components/RouterTabs'
+import { instancesContainerId } from '../../utils/tabAnchors'
+import { RoflAppDetailsContext } from '../RoflAppDetailsPage/hooks'
+
+export const RoflAppDetailsPage: FC = () => {
+  const { t } = useTranslation()
+  const scope = useRequiredScopeParam()
+  const id = useParams().id!
+  const txLink = useHref('')
+  const instancesLink = useHref(`instances#${instancesContainerId}`)
+  const [method, setMethod] = useTypedSearchParam('method', 'any', {
+    deleteParams: ['page'],
+  })
+  const context: RoflAppDetailsContext = { scope, id, method, setMethod }
+  const { isFetched, isLoading, data } = useGetRuntimeRoflAppsId(scope.network, Layer.sapphire, id)
+  const roflApp = data?.data
+
+  if (!roflApp && isFetched) {
+    throw AppErrors.NotFoundRoflApp
+  }
+
+  return (
+    <PageLayout>
+      <SubPageCard featured title={roflApp?.metadata['net.oasis.rofl.name'] || t('rofl.header')}>
+        <RoflAppDetailsView detailsPage isLoading={isLoading} app={roflApp} />
+      </SubPageCard>
+      <Grid container spacing={4}>
+        <StyledGrid item xs={12} md={6}>
+          {/* TODO: uncomment when other PRs are merged */}
+          {/* <MetaDataCard isFetched={isFetched} metadata={roflApp?.metadata} /> */}
+        </StyledGrid>
+        <StyledGrid item xs={12} md={6}>
+          {/* TODO: uncomment when other PRs are merged */}
+          {/* <PolicyCard isFetched={isFetched} policy={roflApp?.policy} /> */}
+        </StyledGrid>
+      </Grid>
+      <RouterTabs
+        tabs={[
+          { label: t('common.transactions'), to: txLink },
+          {
+            label: t('rofl.instances'),
+            to: instancesLink,
+          },
+        ]}
+        context={context}
+      />
+    </PageLayout>
+  )
+}
 
 export const StyledGrid = styled(Grid)(({ theme }) => ({
   [theme.breakpoints.up('sm')]: {

src/locales/en/translation.json

@@ -261,6 +261,7 @@
     "invalidTxHash": "Invalid transaction hash",
     "notFoundBlockHeight": "Block not found",
     "notFoundTx": "Transaction not found",
+    "notFoundRoflApp": "ROFL app not found",
     "notFoundProposal": "Proposal not found",
     "pageDoesNotExist": "The page you are looking for does not exist.",
     "validateURL": "Please validate provided URL",
@@ -703,7 +704,8 @@
     "adminAccount": "Admin account",
     "stakedAmount": "Staked amount",
     "endorsement": "Endorsement",
-    "secrets": "Secrets"
+    "secrets": "Secrets",
+    "header": "ROFL App"
   },
   "search": {
     "placeholder": "Address, Block, Contract, Transaction hash, Token name, etc.",

src/routes.tsx

@@ -26,6 +26,7 @@ import {
   fixedLayer,
   RouteUtils,
   skipGraph,
+  roflAppParamLoader,
 } from './app/utils/route-utils'
 import { RoutingErrorPage } from './app/pages/RoutingErrorPage'
 import { ThemeByScope, withDefaultTheme } from './app/components/ThemeByScope'
@@ -64,6 +65,7 @@ import { ConsensusAccountEventsCard } from './app/pages/ConsensusAccountDetailsP
 import { useConsensusAccountDetailsProps } from './app/pages/ConsensusAccountDetailsPage/hooks'
 import { ConsensusAccountTransactionsCard } from './app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard'
 import { RoflAppsPage } from './app/pages/RoflAppsPage'
+import { RoflAppDetailsPage } from 'app/pages/RoflAppDetailsPage'
 import { FC, useEffect } from 'react'
 import { AnalyticsConsentProvider } from './app/components/AnalyticsConsent'
 import { HighlightingContextProvider } from './app/components/HighlightingContext'
@@ -300,6 +302,11 @@ export const routes: RouteObject[] = [
             path: `rofl/app`,
             element: <RoflAppsPage />,
           },
+          {
+            path: `rofl/app/:id`,
+            element: <RoflAppDetailsPage />,
+            loader: roflAppParamLoader(),
+          },
         ],
       },
     ],

src/types/errors.ts

@@ -21,6 +21,7 @@ export enum AppErrors {
   PageDoesNotExist = 'page_does_not_exist',
   NotFoundBlockHeight = 'not_found_block_height',
   NotFoundTxHash = 'not_found_tx_hash',
+  NotFoundRoflApp = 'not_found_rofl_app',
   NotFoundProposalId = 'not_found_proposal_id',
   InvalidUrl = 'invalid_url',
   InvalidVote = 'invalid_vote',