Merge pull request #1894 from oasisprotocol/mz/roflDashboard

Enable latest ROFL apps list in dashboard

Author: buberdds

.changelog/1894.bugfix.md

@@ -0,0 +1 @@
+Enable latest ROFL apps list in dashboard

src/app/components/Rofl/RoflAppsList.tsx

@@ -13,7 +13,7 @@ type RoflAppsListProps = {
   apps?: RoflApp[]
   isLoading: boolean
   limit: number
-  pagination: TablePaginationProps
+  pagination: TablePaginationProps | false
 }
 
 export const RoflAppsList: FC<RoflAppsListProps> = ({ isLoading, limit, pagination, apps }) => {
@@ -42,7 +42,10 @@ export const RoflAppsList: FC<RoflAppsListProps> = ({ isLoading, limit, paginati
       key: app.id,
       data: [
         {
-          content: index + 1 + (pagination.selectedPage - 1) * pagination.rowsPerPage,
+          content: pagination
+            ? index + 1 + (pagination.selectedPage - 1) * pagination.rowsPerPage
+            : // views without pagination enabled
+              index + 1,
           key: 'order',
         },
         {

src/app/pages/ParatimeDashboardPage/LatestRoflApps.tsx

@@ -0,0 +1,51 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link as RouterLink } from 'react-router-dom'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Link from '@mui/material/Link'
+import { Layer, useGetRuntimeRoflApps } from '../../../oasis-nexus/api'
+import { SearchScope } from '../../../types/searchScope'
+import { NUMBER_OF_ITEMS_ON_DASHBOARD as limit } from '../../config'
+import { COLORS } from '../../../styles/theme/colors'
+import { AppErrors } from '../../../types/errors'
+import { RouteUtils } from '../../utils/route-utils'
+import { RoflAppsList } from '../../components/Rofl/RoflAppsList'
+
+export const LatestRoflApps: FC<{ scope: SearchScope }> = ({ scope }) => {
+  const { t } = useTranslation()
+  const { network, layer } = scope
+  if (layer !== Layer.sapphire) {
+    throw AppErrors.UnsupportedLayer
+  }
+  const roflAppsQuery = useGetRuntimeRoflApps(network, layer, { limit })
+  const { isLoading, data } = roflAppsQuery
+  const roflApps = data?.data.rofl_apps
+
+  if (!roflApps?.length) {
+    return null
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        disableTypography
+        component="h3"
+        title={t('rofl.listTitle')}
+        action={
+          <Link
+            component={RouterLink}
+            to={RouteUtils.getRoflAppsRoute(scope.network)}
+            sx={{ color: COLORS.brandDark }}
+          >
+            {t('common.viewAll')}
+          </Link>
+        }
+      />
+      <CardContent>
+        <RoflAppsList apps={roflApps} isLoading={isLoading} limit={limit} pagination={false} />
+      </CardContent>
+    </Card>
+  )
+}

src/app/pages/ParatimeDashboardPage/index.tsx

@@ -14,6 +14,7 @@ import { ParaTimeSnapshot } from './ParaTimeSnapshot'
 import { TopTokens } from './TopTokens'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { useRuntimeTxMethodParam } from '../../hooks/useCommonParams'
+import { LatestRoflApps } from './LatestRoflApps'
 
 export const ParatimeDashboardPage: FC = () => {
   const { isMobile } = useScreenSize()
@@ -33,13 +34,11 @@ export const ParatimeDashboardPage: FC = () => {
         <Grid item xs={12} md={6}>
           <LatestRuntimeBlocks scope={scope} />
         </Grid>
-        {isMobile && (
-          <Grid item xs={12}>
-            <TopTokens scope={scope} />
-          </Grid>
-        )}
+        <Grid item xs={12}>
+          <TopTokens scope={scope} />
+          {scope.layer === 'sapphire' && <LatestRoflApps scope={scope} />}
+        </Grid>
       </Grid>
-      {!isMobile && <TopTokens scope={scope} />}
       {!isLocal && (
         <>
           <Grid container spacing={4}>