Commit 97ca6234 authored by tom's avatar tom

route and page placeholder

parent 150c98f4
...@@ -74,9 +74,12 @@ export const ROUTES = { ...@@ -74,9 +74,12 @@ export const ROUTES = {
pattern: `${ BASE_PATH }/blocks`, pattern: `${ BASE_PATH }/blocks`,
crossNetworkNavigation: true, crossNetworkNavigation: true,
}, },
block: { block_index: {
pattern: `${ BASE_PATH }/block/[id]`, pattern: `${ BASE_PATH }/block/[id]`,
}, },
block_txs: {
pattern: `${ BASE_PATH }/block/[id]/transactions`,
},
// TOKENS // TOKENS
tokens: { tokens: {
......
import type { NextPage } from 'next';
import Head from 'next/head';
import React from 'react';
import type { PageParams } from './types';
import Block from 'ui/pages/Block';
import type { Props as BlockProps } from 'ui/pages/Block';
import getSeo from './getSeo';
type Props = {
pageParams: PageParams;
tab: BlockProps['tab'];
}
const BlockNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
const { title, description } = getSeo(pageParams);
return (
<>
<Head>
<title>{ title }</title>
<meta name="description" content={ description }/>
</Head>
<Block tab={ tab }/>
</>
);
};
export default BlockNextPage;
import type { PageParams } from './types';
import getNetworkTitle from 'lib/networks/getNetworkTitle';
export default function getSeo(params?: PageParams) {
const networkTitle = getNetworkTitle(params || {});
return {
title: params ? `Block ${ params.id } - ${ networkTitle }` : '',
description: params ? `View the transactions, token transfers, and uncles for block number ${ params.id }` : '',
};
}
import type { GetStaticPaths } from 'next';
export const getStaticPaths: GetStaticPaths = async() => {
return { paths: [], fallback: true };
};
export type PageParams = {
network_type: string;
network_sub_type: string;
id: string;
}
...@@ -15,10 +15,13 @@ type Props = { ...@@ -15,10 +15,13 @@ type Props = {
} }
const TransactionNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => { const TransactionNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
const { title } = getSeo(pageParams); const { title, description } = getSeo(pageParams);
return ( return (
<> <>
<Head><title>{ title }</title></Head> <Head>
<title>{ title }</title>
<meta name="description" content={ description }/>
</Head>
<Transaction tab={ tab }/> <Transaction tab={ tab }/>
</> </>
); );
......
import type { NextPage } from 'next';
import React from 'react';
import type { PageParams } from 'lib/next/tx/types';
import BlockNextPage from 'lib/next/block/BlockNextPage';
type Props = {
pageParams: PageParams;
}
const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
return (
<BlockNextPage tab="block_index" pageParams={ pageParams }/>
);
};
export default BlockPage;
export { getStaticPaths } from 'lib/next/block/getStaticPaths';
export { getStaticProps } from 'lib/next/getStaticProps';
import type { NextPage } from 'next';
import React from 'react';
import type { PageParams } from 'lib/next/tx/types';
import BlockNextPage from 'lib/next/block/BlockNextPage';
type Props = {
pageParams: PageParams;
}
const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
return (
<BlockNextPage tab="block_txs" pageParams={ pageParams }/>
);
};
export default BlockPage;
export { getStaticPaths } from 'lib/next/block/getStaticPaths';
export { getStaticProps } from 'lib/next/getStaticProps';
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: 'block_index', title: 'Details', component: <div>Details</div> },
{ routeName: 'block_txs', title: 'Transactions', component: <div>Transactions</div> },
];
export interface Props {
tab: RoutedTab['routeName'];
}
const BlockPageContent = ({ tab }: Props) => {
return (
<Page>
<PageHeader text="Block"/>
<RoutedTabs
tabs={ TABS }
defaultActiveTab={ tab }
/>
</Page>
);
};
export default BlockPageContent;
...@@ -77,7 +77,7 @@ const TxsListItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => { ...@@ -77,7 +77,7 @@ const TxsListItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
</Flex> </Flex>
<Box mt={ 2 }> <Box mt={ 2 }>
<Text as="span">Block </Text> <Text as="span">Block </Text>
<Link href={ link('block', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link> <Link href={ link('block_index', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link>
</Box> </Box>
<Flex alignItems="center" height={ 6 } mt={ 6 }> <Flex alignItems="center" height={ 6 } mt={ 6 }>
<Address width="calc((100%-40px)/2)"> <Address width="calc((100%-40px)/2)">
......
...@@ -106,7 +106,7 @@ const TxsTableItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => { ...@@ -106,7 +106,7 @@ const TxsTableItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
</TruncatedTextTooltip> </TruncatedTextTooltip>
</Td> </Td>
<Td> <Td>
<Link href={ link('block', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link> <Link href={ link('block_index', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link>
</Td> </Td>
{ isLargeScreen ? ( { isLargeScreen ? (
<> <>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment