diff --git a/src/execution/ChainInfo.tsx b/src/execution/ChainInfo.tsx index aa90367a..c1190ff9 100644 --- a/src/execution/ChainInfo.tsx +++ b/src/execution/ChainInfo.tsx @@ -7,14 +7,21 @@ import ContentFrame from "../components/ContentFrame"; import { PendingChainInfoResults } from "../search/PendingResults"; import { useBCInfoStateInfo, useLatestBlockChainInfo } from "../useLatestBlock"; import { RuntimeContext } from "../useRuntime"; +import { useQuirks } from "../useQuirks"; const ChainInfo: FC = () => { - const { zilliqa } = useContext(RuntimeContext); + const { zilliqa, provider } = useContext(RuntimeContext); + const quirks = useQuirks(provider); const latestBlockChainInfo = useLatestBlockChainInfo(zilliqa); const BCInfo = useBCInfoStateInfo(latestBlockChainInfo); + let gridValues = "grid-rows-2 grid-cols-4" + if (quirks?.isZilliqa1) { + gridValues = "grid-rows-3 grid-cols-4" + } + gridValues = "grid items-baseline gap-x-1 border-t border-b border-gray-200 bg-gray-100 text-sm " + gridValues; // Return a table with rows containing the basic information of the most recent RECENT_SIZE blocks return ( @@ -22,8 +29,7 @@ const ChainInfo: FC = () => { {latestBlockChainInfo ? (
{ data={latestBlockChainInfo.NumTransactions} /> - + { quirks?.isZilliqa1 && ( - - + ) } + { quirks?.isZilliqa1 && ( - - - ) + } + { quirks?.isZilliqa1 && ( + + - + /> + + )} + { quirks?.isZilliqa1 && ( - + /> + ) + } { data={latestBlockChainInfo.TransactionRate.toFixed(5)} /> + { quirks?.isZilliqa1 && ( + + + + )} + {quirks?.isZilliqa1 && ( - - - - + + )}