LaconicNetwork/vega-frontend-monorepo
3
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 { SecondsAgo } from '../../seconds-ago';
import { TxsPerBlock } from '../../txs/txs-per-block';
import { Table } from '../../table';
interface BlocksProps {
data: TendermintBlockchainResponse | undefined;
@ -14,42 +15,40 @@ export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
}
return (
<table>
<tbody>
{data.result?.block_metas?.map((block) => {
return (
<>
<tr>
<Table>
{data.result?.block_metas?.map((block) => {
return (
<>
<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>
<Link to={`/blocks/${block.header?.height}`}>
{block.header?.height}
<Link to={`/validators/${block.header.proposer_address}`}>
{block.header.proposer_address}
</Link>
</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>
)}
</>
);
})}
</tbody>
</table>
<td>
<SecondsAgo date={block.header?.time} />
</td>
</tr>
{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 { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
import { Table } from '../../table';
interface TxContentProps {
data: ChainExplorerTxResponse | undefined;
@ -21,14 +22,12 @@ export const TxContent = ({ data }: TxContentProps) => {
return (
<>
<table>
<tbody>
<tr>
<td>Type</td>
<td>{data.Type}</td>
</tr>
</tbody>
</table>
<Table>
<tr>
<td>Type</td>
<td>{data.Type}</td>
</tr>
</Table>
<h3>Decoded transaction content</h3>
<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 { Routes } from '../../../routes/router-config';
import { Result } from '../../../routes/txs/tendermint-transaction-response.d';
import { Table } from '../../table';
interface TxDetailsProps {
txData: Result | undefined;
@ -13,36 +14,34 @@ export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
}
return (
<table>
<tbody>
<Table>
<tr>
<td>Hash</td>
<td>{txData.hash}</td>
</tr>
{pubKey ? (
<tr>
<td>Hash</td>
<td>{txData.hash}</td>
<td>Submitted by</td>
<td>
<Link to={`/${Routes.PARTIES}/${pubKey}`}>{pubKey}</Link>
</td>
</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>
<td>Encoded tnx</td>
<td>{txData.tx}</td>
<td>Submitted by</td>
<td>Awaiting decoded transaction data</td>
</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 { TxsPerBlock } from '../../../components/txs/txs-per-block';
import { SecondsAgo } from '../../../components/seconds-ago';
import { Table } from '../../../components/table';
const Block = () => {
const { block } = useParams<{ block: string }>();
@ -17,21 +18,18 @@ const Block = () => {
return (
<section>
<h1>BLOCK {block}</h1>
<table>
<tbody>
<tr>
<td>Mined by</td>
<td>{blockData?.result.block.header?.proposer_address}</td>
</tr>
<tr>
<td>Time</td>
<td>
<SecondsAgo date={blockData?.result.block.header?.time} />
</td>
</tr>
</tbody>
</table>
<Table>
<tr>
<td>Mined by</td>
<td>{blockData?.result.block.header?.proposer_address}</td>
</tr>
<tr>
<td>Time</td>
<td>
<SecondsAgo date={blockData?.result.block.header?.time} />
</td>
</tr>
</Table>
<TxsPerBlock blockHeight={block} />
</section>
);