Enable ROFL list in homepage

Author: buberdds

.changelog/2302.feature.md

@@ -0,0 +1 @@
+Implement new homepage

src/app/pages/HomePage/RoflAppsCard.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { LatestRoflAppsContent } from '../ParatimeDashboardPage/LatestRoflApps'
+import { Card, CardContent, CardHeader, CardTitle } from '@oasisprotocol/ui-library/src/components/cards'
+
+export const RoflAppsCard: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Card variant="layout">
+      <CardHeader>
+        <CardTitle>{t('rofl.listTitle')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <LatestRoflAppsContent scope={{ network: 'mainnet', layer: 'sapphire' }} />
+      </CardContent>
+    </Card>
+  )
+}

src/app/pages/HomePage/index.tsx

@@ -6,6 +6,7 @@ import { BuildBanner } from '../../components/BuildBanner'
 import { useSearchQueryNetworkParam } from '../../hooks/useSearchQueryNetworkParam'
 import { NetworkOfflineBanner } from '../../components/OfflineBanner'
 import { useIsApiReachable } from '../../components/OfflineBanner/hook'
+import { RoflAppsCard } from './RoflAppsCard'
 
 export const HomePage: FC = () => {
   const { t } = useTranslation()
@@ -16,7 +17,10 @@ export const HomePage: FC = () => {
     <>
       <BuildBanner />
       <NetworkOfflineBanner wantedNetwork={network} />
-      <Search disabled={!isApiReachable} />
+      <div className="px-6">
+        <Search disabled={!isApiReachable} />
+        <RoflAppsCard />
+      </div>
       <Footer />
     </>
   )

src/app/pages/ParatimeDashboardPage/LatestRoflApps.tsx

@@ -12,7 +12,7 @@ import { RouteUtils } from '../../utils/route-utils'
 import { RoflAppsList } from '../../components/Rofl/RoflAppsList'
 import { ErrorBoundary } from '../../components/ErrorBoundary'
 
-const LatestRoflAppsContent: FC<{ scope: RuntimeScope }> = ({ scope }) => {
+export const LatestRoflAppsContent: FC<{ scope: RuntimeScope }> = ({ scope }) => {
   const { network, layer } = scope
   if (!paraTimesConfig[layer]?.offerRoflTxTypes) throw AppErrors.UnsupportedLayer
   const roflAppsQuery = useGetRuntimeRoflApps(network, layer, { limit })