page setup

86d8e34f · tom · 34ba27e1 · 86d8e34f · 86d8e34f · 86d8e34f
Commit 86d8e34f authored Sep 28, 2022 by tom
8 changed files
--- a/lib/link/routes.ts
+++ b/lib/link/routes.ts
@@ -74,6 +74,14 @@ export const ROUTES = {
    pattern: `${ BASE_PATH }/blocks`,
    crossNetworkNavigation: true,
  },
+  uncles: {
+    pattern: `${ BASE_PATH }/uncles`,
+    crossNetworkNavigation: true,
+  },
+  reorgs: {
+    pattern: `${ BASE_PATH }/reorgs`,
+    crossNetworkNavigation: true,
+  },
  block_index: {
    pattern: `${ BASE_PATH }/block/[id]`,
  },

--- a/lib/next/blocks/BlocksNextPage.tsx
+++ b/lib/next/blocks/BlocksNextPage.tsx
+import type { NextPage } from 'next';
+import Head from 'next/head';
+import React from 'react';
+import type { PageParams } from './types';
+import Blocks from 'ui/pages/Blocks';
+import type { Props as BlocksProps } from 'ui/pages/Blocks';
+import getSeo from './getSeo';
+type Props = {
+  pageParams: PageParams;
+  tab: BlocksProps['tab'];
+}
+const BlocksNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
+  const { title } = getSeo(pageParams);
+  return (
+    <>
+      <Head>
+        <title>{ title }</title>
+      </Head>
+      <Blocks tab={ tab }/>
+    </>
+  );
+};
+export default BlocksNextPage;
--- a/lib/next/blocks/getSeo.ts
+++ b/lib/next/blocks/getSeo.ts
+import type { PageParams } from './types';
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
+export default function getSeo(params?: PageParams) {
+  const networkTitle = getNetworkTitle(params || {});
+  return {
+    title: params ? `${ networkTitle } - BlockScout` : '',
+  };
+}
--- a/lib/next/blocks/types.ts
+++ b/lib/next/blocks/types.ts
+export type PageParams = {
+  network_type: string;
+  network_sub_type: string;
+}
--- a/pages/[network_type]/[network_sub_type]/blocks.tsx
+++ b/pages/[network_type]/[network_sub_type]/blocks.tsx
+import type { NextPage } from 'next';
+import React from 'react';
+import type { PageParams } from 'lib/next/tx/types';
+import BlocksNextPage from 'lib/next/blocks/BlocksNextPage';
+type Props = {
+  pageParams: PageParams;
+}
+const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
+  return (
+    <BlocksNextPage tab="blocks" pageParams={ pageParams }/>
+  );
+};
+export default BlockPage;
+export { getStaticPaths } from 'lib/next/block/getStaticPaths';
+export { getStaticProps } from 'lib/next/getStaticProps';
--- a/pages/[network_type]/[network_sub_type]/reorgs.tsx
+++ b/pages/[network_type]/[network_sub_type]/reorgs.tsx
+import type { NextPage } from 'next';
+import React from 'react';
+import type { PageParams } from 'lib/next/tx/types';
+import BlocksNextPage from 'lib/next/blocks/BlocksNextPage';
+type Props = {
+  pageParams: PageParams;
+}
+const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
+  return (
+    <BlocksNextPage tab="reorgs" pageParams={ pageParams }/>
+  );
+};
+export default BlockPage;
+export { getStaticPaths } from 'lib/next/block/getStaticPaths';
+export { getStaticProps } from 'lib/next/getStaticProps';
--- a/pages/[network_type]/[network_sub_type]/uncles.tsx
+++ b/pages/[network_type]/[network_sub_type]/uncles.tsx
+import type { NextPage } from 'next';
+import React from 'react';
+import type { PageParams } from 'lib/next/tx/types';
+import BlocksNextPage from 'lib/next/blocks/BlocksNextPage';
+type Props = {
+  pageParams: PageParams;
+}
+const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
+  return (
+    <BlocksNextPage tab="uncles" pageParams={ pageParams }/>
+  );
+};
+export default BlockPage;
+export { getStaticPaths } from 'lib/next/block/getStaticPaths';
+export { getStaticProps } from 'lib/next/getStaticProps';
--- a/ui/pages/Blocks.tsx
+++ b/ui/pages/Blocks.tsx
+import { useRouter } from 'next/router';
+import React from 'react';
+import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
+import Page from 'ui/shared/Page';
+import PageHeader from 'ui/shared/PageHeader';
+import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
+const TABS: Array<RoutedTab> = [
+  { routeName: 'blocks', title: 'All', component: <div>All</div> },
+  { routeName: 'reorgs', title: 'Forked', component: <div>Forked</div> },
+  { routeName: 'uncles', title: 'Uncles', component: <div>Uncles</div> },
+];
+export interface Props {
+  tab: RoutedTab['routeName'];
+}
+const BlocksPageContent = ({ tab }: Props) => {
+  const router = useRouter();
+  return (
+    <Page>
+      <PageHeader text={ `Block #${ router.query.id || '' }` }/>
+      <RoutedTabs
+        tabs={ TABS }
+        defaultActiveTab={ tab }
+      />
+    </Page>
+  );
+};
+export default BlocksPageContent;