Merge pull request #1848 from oasisprotocol/mz/enableRoflAppDetailsPage

Enable ROFL app details page

Author: buberdds

.changelog/1848.bugfix.md

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

src/app/components/ErrorDisplay/index.tsx

@@ -11,6 +11,10 @@ type FormattedError = { title: string; message: ReactNode }
 const errorMap: Record<AppErrors, (t: TFunction, error: ErrorPayload) => FormattedError> = {
   [AppErrors.Unknown]: (t, error) => ({ title: t('errors.unknown'), message: error.message }),
   [AppErrors.InvalidAddress]: t => ({ title: t('errors.invalidAddress'), message: t('errors.validateURL') }),
+  [AppErrors.InvalidRoflAppId]: t => ({
+    title: t('errors.invalidRoflAppId'),
+    message: t('errors.validateURL'),
+  }),
   [AppErrors.InvalidBlockHeight]: t => ({
     title: t('errors.invalidBlockHeight'),
     message: t('errors.validateURL'),
@@ -49,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/PolicyCard.tsx

@@ -6,14 +6,15 @@ import CardContent from '@mui/material/CardContent'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import { Layer, RoflAppPolicy, useGetRuntimeRoflAppsIdTransactions } from '../../../oasis-nexus/api'
+import { Network } from '../../../types/network'
 import { TransactionLink } from '../../components/Transactions/TransactionLink'
 import { EmptyStateCard } from './EmptyStateCard'
 import { GridRow } from './GridRow'
 
 type PolicyCardProps = {
   id: string
   isFetched: boolean
-  network: any
+  network: Network
   policy: RoflAppPolicy | undefined
 }
 

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,20 @@
 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 Skeleton from '@mui/material/Skeleton'
 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 +26,67 @@ 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'
+import { MetaDataCard } from './MetaDataCard'
+import { PolicyCard } from './PolicyCard'
+
+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={
+          isLoading ? <Skeleton variant="text" /> : roflApp?.metadata['net.oasis.rofl.name'] || roflApp?.id
+        }
+      >
+        <RoflAppDetailsView detailsPage isLoading={isLoading} app={roflApp} />
+      </SubPageCard>
+      <Grid container spacing={4}>
+        <StyledGrid item xs={12} md={6}>
+          <MetaDataCard isFetched={isFetched} metadata={roflApp?.metadata} />
+        </StyledGrid>
+        <StyledGrid item xs={12} md={6}>
+          {roflApp && (
+            <PolicyCard
+              id={roflApp?.id}
+              network={roflApp?.network}
+              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/app/utils/helpers.ts

@@ -24,6 +24,15 @@ export const isValidEthAddress = (hexAddress: string): boolean => {
   return /^0x[0-9a-fA-F]{40}$/.test(hexAddress)
 }
 
+export const isValidRoflAppId = (id: string): boolean => {
+  try {
+    oasis.address.fromBech32('rofl', id)
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
 export const isValidProposalId = (proposalId: string): boolean => /^[0-9]+$/.test(proposalId)
 
 /** oasis.address.fromData(...) but without being needlessly asynchronous */

src/app/utils/route-utils.ts

@@ -1,5 +1,5 @@
 import { LoaderFunctionArgs } from 'react-router-dom'
-import { isValidProposalId, isValidTxHash, isValidTxOasisHash } from './helpers'
+import { isValidProposalId, isValidRoflAppId, isValidTxHash, isValidTxOasisHash } from './helpers'
 import { isValidBlockHeight, isValidOasisAddress, isValidEthAddress } from './helpers'
 import { AppError, AppErrors } from '../../types/errors'
 import { EvmTokenType, HasScope, Layer } from '../../oasis-nexus/api'
@@ -295,6 +295,21 @@ const validateConsensusAddressParam = (address: string) => {
   return isValid
 }
 
+const validateRoflAppIdParam = (id: string) => {
+  const isValid = isValidRoflAppId(id)
+
+  if (!isValid) {
+    throw new AppError(AppErrors.InvalidRoflAppId)
+  }
+
+  return isValid
+}
+
+export type RoflAppLoaderData = {
+  id: string
+  searchTerm: string
+}
+
 const validateRuntimeAddressParam = (address: string) => {
   const isValid = isValidOasisAddress(address) || isValidEthAddress(address)
   if (!isValid) {
@@ -364,6 +379,16 @@ export const runtimeAddressParamLoader =
     }
   }
 
+export const roflAppParamLoader =
+  (queryParam: string = 'id') =>
+  ({ params, request }: LoaderFunctionArgs): RoflAppLoaderData => {
+    validateRoflAppIdParam(params[queryParam]!)
+    return {
+      id: params[queryParam]!,
+      searchTerm: getSearchTermFromRequest(request),
+    }
+  }
+
 export const blockHeightParamLoader = async ({ params }: LoaderFunctionArgs) => {
   return validateBlockHeightParam(params.blockHeight!)
 }

src/locales/en/translation.json

@@ -254,12 +254,14 @@
     "unsupportedLayer": "Unsupported layer",
     "unsupportedNetwork": "Unsupported network",
     "invalidAddress": "Invalid address",
+    "invalidRoflAppId": "Invalid ROFL app ID",
     "invalidBlockHeight": "Invalid block height",
     "invalidPageNumber": "Invalid page number",
     "invalidProposalId": "Invalid proposal ID",
     "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",

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

@@ -13,13 +13,15 @@ export enum AppErrors {
   UnsupportedNetwork = 'unsupported_network',
   UnsupportedLayer = 'unsupported_layer',
   InvalidAddress = 'invalid_address',
+  InvalidRoflAppId = 'invalid_rofl_app_id',
   InvalidBlockHeight = 'invalid_block_height',
   InvalidTxHash = 'invalid_tx_hash',
   InvalidProposalId = 'invalid_proposal_id',
   InvalidPageNumber = 'invalid_page_number',
   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',