LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Added Table presentational component for a little cleanup

Browse Source
This commit is contained in:
sam-keen 2022-03-03 14:09:40 +00:00 committed by Dexter Edwards
parent 1b6c42c031
commit 3f47eed917
5 changed files with 91 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
apps/explorer/src/app/components/blocks/home/blocksTable.tsx
View File

@ -2,6 +2,7 @@ import { TendermintBlockchainResponse } from '../../../routes/blocks/tendermint-
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { SecondsAgo } from '../../seconds-ago'; import { SecondsAgo } from '../../seconds-ago';
import { TxsPerBlock } from '../../txs/txs-per-block'; import { TxsPerBlock } from '../../txs/txs-per-block';
import { Table } from '../../table';
interface BlocksProps { interface BlocksProps {
data: TendermintBlockchainResponse | undefined; data: TendermintBlockchainResponse | undefined;
@ -14,42 +15,40 @@ export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
} }
return ( return (
<table> <Table>
<tbody> {data.result?.block_metas?.map((block) => {
{data.result?.block_metas?.map((block) => { return (
return ( <>
<> <tr>
<tr> <td>
<Link to={`/blocks/${block.header?.height}`}>
{block.header?.height}
</Link>
</td>
<td>
{block.num_txs === '1'
? '1 transaction'
: `${block.num_txs} transactions`}
</td>
{block.header?.proposer_address && (
<td> <td>
<Link to={`/blocks/${block.header?.height}`}> <Link to={`/validators/${block.header.proposer_address}`}>
{block.header?.height} {block.header.proposer_address}
</Link> </Link>
</td> </td>
<td>
{block.num_txs === '1'
? '1 transaction'
: `${block.num_txs} transactions`}
</td>
{block.header?.proposer_address && (
<td>
<Link to={`/validators/${block.header.proposer_address}`}>
{block.header.proposer_address}
</Link>
</td>
)}
<td>
<SecondsAgo date={block.header?.time} />
</td>
</tr>
{showTransactions && (
<tr>
<TxsPerBlock blockHeight={block.header.height} />
</tr>
)} )}
</> <td>
); <SecondsAgo date={block.header?.time} />
})} </td>
</tbody> </tr>
</table> {showTransactions && (
<tr>
<TxsPerBlock blockHeight={block.header.height} />
</tr>
)}
</>
);
})}
</Table>
); );
}; };

13
apps/explorer/src/app/components/table/index.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
interface TableProps {
children: React.ReactNode;
}
export const Table = ({ children }: TableProps) => {
return (
<table>
<tbody>{children}</tbody>
</table>
);
};

15
apps/explorer/src/app/components/txs/id/txContent.tsx
View File

@ -1,5 +1,6 @@
import { Codeblock } from '../../codeblock'; import { Codeblock } from '../../codeblock';
import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response'; import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
import { Table } from '../../table';
interface TxContentProps { interface TxContentProps {
data: ChainExplorerTxResponse | undefined; data: ChainExplorerTxResponse | undefined;
@ -21,14 +22,12 @@ export const TxContent = ({ data }: TxContentProps) => {
return ( return (
<> <>
<table> <Table>
<tbody> <tr>
<tr> <td>Type</td>
<td>Type</td> <td>{data.Type}</td>
<td>{data.Type}</td> </tr>
</tr> </Table>
</tbody>
</table>
<h3>Decoded transaction content</h3> <h3>Decoded transaction content</h3>
<Codeblock code={displayCode} language={'javascript'} /> <Codeblock code={displayCode} language={'javascript'} />

53
apps/explorer/src/app/components/txs/id/txDetails.tsx
View File

@ -1,6 +1,7 @@
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Routes } from '../../../routes/router-config'; import { Routes } from '../../../routes/router-config';
import { Result } from '../../../routes/txs/tendermint-transaction-response.d'; import { Result } from '../../../routes/txs/tendermint-transaction-response.d';
import { Table } from '../../table';
interface TxDetailsProps { interface TxDetailsProps {
txData: Result | undefined; txData: Result | undefined;
@ -13,36 +14,34 @@ export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
} }
return ( return (
<table> <Table>
<tbody> <tr>
<td>Hash</td>
<td>{txData.hash}</td>
</tr>
{pubKey ? (
<tr> <tr>
<td>Hash</td> <td>Submitted by</td>
<td>{txData.hash}</td> <td>
<Link to={`/${Routes.PARTIES}/${pubKey}`}>{pubKey}</Link>
</td>
</tr> </tr>
{pubKey ? ( ) : (
<tr>
<td>Submitted by</td>
<td>
<Link to={`/${Routes.PARTIES}/${pubKey}`}>{pubKey}</Link>
</td>
</tr>
) : (
<tr>
<td>Submitted by</td>
<td>Awaiting decoded transaction data</td>
</tr>
)}
{txData.height ? (
<tr>
<td>Block</td>
<td>{txData.height}</td>
</tr>
) : null}
<tr> <tr>
<td>Encoded tnx</td> <td>Submitted by</td>
<td>{txData.tx}</td> <td>Awaiting decoded transaction data</td>
</tr> </tr>
</tbody> )}
</table> {txData.height ? (
<tr>
<td>Block</td>
<td>{txData.height}</td>
</tr>
) : null}
<tr>
<td>Encoded tnx</td>
<td>{txData.tx}</td>
</tr>
</Table>
); );
}; };

28
apps/explorer/src/app/routes/blocks/id/index.tsx
View File

@ -5,6 +5,7 @@ import useFetch from '../../../hooks/use-fetch';
import { TendermintBlocksResponse } from '../tendermint-blocks-response'; import { TendermintBlocksResponse } from '../tendermint-blocks-response';
import { TxsPerBlock } from '../../../components/txs/txs-per-block'; import { TxsPerBlock } from '../../../components/txs/txs-per-block';
import { SecondsAgo } from '../../../components/seconds-ago'; import { SecondsAgo } from '../../../components/seconds-ago';
import { Table } from '../../../components/table';
const Block = () => { const Block = () => {
const { block } = useParams<{ block: string }>(); const { block } = useParams<{ block: string }>();
@ -17,21 +18,18 @@ const Block = () => {
return ( return (
<section> <section>
<h1>BLOCK {block}</h1> <h1>BLOCK {block}</h1>
<table> <Table>
<tbody> <tr>
<tr> <td>Mined by</td>
<td>Mined by</td> <td>{blockData?.result.block.header?.proposer_address}</td>
<td>{blockData?.result.block.header?.proposer_address}</td> </tr>
</tr> <tr>
<tr> <td>Time</td>
<td>Time</td> <td>
<td> <SecondsAgo date={blockData?.result.block.header?.time} />
<SecondsAgo date={blockData?.result.block.header?.time} /> </td>
</td> </tr>
</tr> </Table>
</tbody>
</table>
<TxsPerBlock blockHeight={block} /> <TxsPerBlock blockHeight={block} />
</section> </section>
); );