diff --git a/apps/explorer/src/app/components/blocks/home/blocksTable.tsx b/apps/explorer/src/app/components/blocks/home/blocksTable.tsx index 234b801e6..bfce854a6 100644 --- a/apps/explorer/src/app/components/blocks/home/blocksTable.tsx +++ b/apps/explorer/src/app/components/blocks/home/blocksTable.tsx @@ -1,13 +1,14 @@ import { TendermintBlockchainResponse } from '../../../routes/blocks/tendermint-blockchain-response'; import { Link } from 'react-router-dom'; import { SecondsAgo } from '../../seconds-ago'; +import { TxsPerBlock } from '../../txs/txs-per-block'; interface BlocksProps { data: TendermintBlockchainResponse | undefined; - showExpanded?: boolean; + showTransactions?: boolean; } -export const BlocksTable = ({ data }: BlocksProps) => { +export const BlocksTable = ({ data, showTransactions }: BlocksProps) => { if (!data?.result) { return <>No block data; } @@ -17,28 +18,35 @@ export const BlocksTable = ({ data }: BlocksProps) => { {data.result?.block_metas?.map((block) => { return ( - - - - {block.header?.height} - - - - {block.num_txs === '1' - ? '1 transaction' - : `${block.num_txs} transactions`} - - {block.header?.proposer_address && ( + <> + - - {block.header.proposer_address} + + {block.header?.height} + + {block.num_txs === '1' + ? '1 transaction' + : `${block.num_txs} transactions`} + + {block.header?.proposer_address && ( + + + {block.header.proposer_address} + + + )} + + + + + {showTransactions && ( + + + )} - - - - + ); })} diff --git a/apps/explorer/src/app/components/txs/txs-per-block/index.tsx b/apps/explorer/src/app/components/txs/txs-per-block/index.tsx new file mode 100644 index 000000000..ff6051a52 --- /dev/null +++ b/apps/explorer/src/app/components/txs/txs-per-block/index.tsx @@ -0,0 +1,48 @@ +import useFetch from '../../../hooks/use-fetch'; +import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response'; +import { DATA_SOURCES } from '../../../config'; + +interface TxsPerBlockProps { + blockHeight: string; +} + +export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => { + const { + state: { data: decodedBlockData }, + } = useFetch(DATA_SOURCES.chainExplorerUrl, { + method: 'POST', + mode: 'cors', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + block_height: parseInt(blockHeight!), + node_url: `${DATA_SOURCES.tendermintUrl}/`, + }), + }); + + return ( + + + + + + + + + + {decodedBlockData && + decodedBlockData.map(({ TxHash, PubKey, Type }, index) => { + return ( + + + + + + ); + })} + +
TransactionFromType
{TxHash}{PubKey}{Type}
+ ); +}; diff --git a/apps/explorer/src/app/routes/txs/home/index.tsx b/apps/explorer/src/app/routes/txs/home/index.tsx index eed166606..1209a312c 100644 --- a/apps/explorer/src/app/routes/txs/home/index.tsx +++ b/apps/explorer/src/app/routes/txs/home/index.tsx @@ -1,8 +1,27 @@ +import useFetch from '../../../hooks/use-fetch'; +import { TendermintBlockchainResponse } from '../../blocks/tendermint-blockchain-response'; +import { DATA_SOURCES } from '../../../config'; +import { BlocksTable } from '../../../components/blocks'; +import { JumpToBlock } from '../../../components/jump-to-block'; + const Txs = () => { + const { + state: { data }, + refetch, + } = useFetch( + `${DATA_SOURCES.tendermintUrl}/blockchain` + ); + return ( -
-

Transactions

-
+ <> +
+

Transactions

+ + +
+ + + ); };