adjust title for dapps category pages

lib/metadata/templates/title.ts

@@ -17,7 +17,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/tokens': 'Tokens list - %network_name% explorer',
   '/token/[hash]': '%network_name% token details',
   '/token/[hash]/instance/[id]': '%network_name% NFT instance',
-  '/apps': '%network_name% DApps - Explore top apps',
+  '/apps': '%network_name% %seo_category% - %seo_details%',
   '/apps/[id]': '%network_name% marketplace app',
   '/stats': '%network_name% stats - %network_name% network insights',
   '/api-docs': '%network_name% API docs - %network_name% developer tools',

lib/metadata/types.ts

@@ -9,6 +9,7 @@ export type ApiData<Pathname extends Route['pathname']> =
     Pathname extends '/token/[hash]' ? TokenInfo :
     Pathname extends '/token/[hash]/instance/[id]' ? { symbol: string } :
     Pathname extends '/apps/[id]' ? { app_name: string } :
+    Pathname extends '/apps' ? { seo_category: string; seo_details: string } :
     never
 ) | null;
 

pages/apps/index.tsx

@@ -1,17 +1,35 @@
-import type { NextPage } from 'next';
+import type { GetServerSideProps } from 'next';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
+import type { NextPageWithLayout } from 'nextjs/types';
+
+import type { Route } from 'nextjs-routes';
+import * as gSSP from 'nextjs/getServerSideProps';
+import type { Props } from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
 
 const Marketplace = dynamic(() => import('ui/pages/Marketplace'), { ssr: false });
 
-const Page: NextPage = () => (
-  <PageNextJs pathname="/apps">
+const pathname: Route['pathname'] = '/apps';
+
+const Page: NextPageWithLayout<Props<typeof pathname>> = (props: Props<typeof pathname>) => (
+  <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
     <Marketplace/>
   </PageNextJs>
 );
 
 export default Page;
 
-export { marketplace as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.marketplace<typeof pathname>(ctx);
+
+  if ('props' in baseResponse) {
+    (await baseResponse.props).apiData = {
+      seo_category: typeof ctx.query.category === 'string' ? ctx.query.category : 'DApps',
+      seo_details: ctx.query.category ? 'Decentralized trading apps' : 'Explore top apps',
+    };
+  }
+
+  return baseResponse;
+};