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 (
+
+
+
+ Transaction |
+ From |
+ Type |
+
+
+
+ {decodedBlockData &&
+ decodedBlockData.map(({ TxHash, PubKey, Type }, index) => {
+ return (
+
+ {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
+
+
+
+
+
+ >
);
};