hide block column

ui/block/BlockTxs.tsx

@@ -12,6 +12,7 @@ const BlockTxs = () => {
     <TxsContent
       queryName={ QueryKeys.blockTxs }
       apiPath={ `/node-api/blocks/${ router.query.id }/transactions` }
+      showBlockInfo={ false }
     />
   );
 };

ui/blocks/BlocksContent.tsx

@@ -92,7 +92,7 @@ const BlocksContent = ({ type }: Props) => {
       <>
         { socketAlert && <Alert status="warning" mb={ 6 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
         <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
-        <Hide below="lg" key="content-desktop"><BlocksTable data={ data.items } top={ isPaginatorHidden ? 0 : 80 }/></Hide>
+        <Hide below="lg" key="content-desktop"><BlocksTable data={ data.items } top={ isPaginatorHidden ? 0 : 80 } page={ pagination.page }/></Hide>
       </>
     );
 

ui/blocks/BlocksTable.tsx

@@ -13,9 +13,10 @@ import { default as Thead } from 'ui/shared/TheadSticky';
 interface Props {
   data: Array<Block>;
   top: number;
+  page: number;
 }
 
-const BlocksTable = ({ data, top }: Props) => {
+const BlocksTable = ({ data, top, page }: Props) => {
 
   return (
     <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
@@ -32,8 +33,7 @@ const BlocksTable = ({ data, top }: Props) => {
       </Thead>
       <Tbody>
         <AnimatePresence initial={ false }>
-          { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
-          { data.map((item) => <BlocksTableItem key={ item.height } data={ item } enableTimeIncrement/>) }
+          { data.map((item) => <BlocksTableItem key={ item.height } data={ item } enableTimeIncrement={ page === 1 }/>) }
         </AnimatePresence>
       </Tbody>
     </Table>

ui/txs/TxsContent.tsx

@@ -19,6 +19,7 @@ type Props = {
   showDescription?: boolean;
   stateFilter?: TTxsFilters['filter'];
   apiPath: string;
+  showBlockInfo?: boolean;
 }
 
 const TxsContent = ({
@@ -26,6 +27,7 @@ const TxsContent = ({
   showDescription,
   stateFilter,
   apiPath,
+  showBlockInfo = true,
 }: Props) => {
   const {
     pagination,
@@ -47,8 +49,8 @@ const TxsContent = ({
     if (isLoading) {
       return (
         <>
-          <Show below="lg" ssr={ false }><TxsSkeletonMobile/></Show>
-          <Hide below="lg" ssr={ false }><TxsSkeletonDesktop/></Hide>
+          <Show below="lg" ssr={ false }><TxsSkeletonMobile showBlockInfo={ showBlockInfo }/></Show>
+          <Hide below="lg" ssr={ false }><TxsSkeletonDesktop showBlockInfo={ showBlockInfo }/></Hide>
         </>
       );
     }
@@ -61,8 +63,12 @@ const TxsContent = ({
 
     return (
       <>
-        <Show below="lg" ssr={ false }><Box>{ txs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
-        <Hide below="lg" ssr={ false }><TxsTable txs={ txs } sort={ setSortByField } sorting={ sorting } top={ isPaginatorHidden ? 0 : 80 }/></Hide>
+        <Show below="lg" ssr={ false }>
+          <Box>{ txs.map(tx => <TxsListItem tx={ tx } key={ tx.hash } showBlockInfo={ showBlockInfo }/>) }</Box>
+        </Show>
+        <Hide below="lg" ssr={ false }>
+          <TxsTable txs={ txs } sort={ setSortByField } sorting={ sorting } showBlockInfo={ showBlockInfo } top={ isPaginatorHidden ? 0 : 80 }/>
+        </Hide>
       </>
     );
   })();

ui/txs/TxsListItem.tsx

@@ -28,7 +28,7 @@ import TxStatus from 'ui/shared/TxStatus';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 import TxType from 'ui/txs/TxType';
 
-const TxsListItem = ({ tx }: {tx: Transaction}) => {
+const TxsListItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: boolean}) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
@@ -77,7 +77,7 @@ const TxsListItem = ({ tx }: {tx: Transaction}) => {
             { tx.method }
           </Text>
         </Flex>
-        { tx.block !== null && (
+        { showBlockInfo && tx.block !== null && (
           <Box mt={ 2 }>
             <Text as="span">Block </Text>
             <Link href={ link('block', { id: tx.block.toString() }) }>{ tx.block }</Link>

ui/txs/TxsSkeletonDesktop.tsx

@@ -3,10 +3,17 @@ import React from 'react';
 
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
-const TxsInternalsSkeletonDesktop = () => {
+interface Props {
+  showBlockInfo: boolean;
+}
+
+const TxsInternalsSkeletonDesktop = ({ showBlockInfo }: Props) => {
   return (
     <Box mb={ 8 }>
-      <SkeletonTable columns={ [ '32px', '20%', '18%', '15%', '11%', '292px', '18%', '18%' ] }/>
+      <SkeletonTable columns={ showBlockInfo ?
+        [ '32px', '20%', '18%', '15%', '11%', '292px', '18%', '18%' ] :
+        [ '32px', '20%', '18%', '15%', '292px', '18%', '18%' ]
+      }/>
     </Box>
   );
 };

ui/txs/TxsSkeletonMobile.tsx

 import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-const TxInternalsSkeletonMobile = () => {
+interface Props {
+  showBlockInfo: boolean;
+}
+
+const TxInternalsSkeletonMobile = ({ showBlockInfo }: Props) => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
@@ -25,7 +29,7 @@ const TxInternalsSkeletonMobile = () => {
           <Skeleton w="100%" h="30px" mt={ 3 }/>
           <Skeleton w="50%" h={ 6 } mt={ 3 }/>
           <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-          <Skeleton w="100%" h={ 6 } mt={ 6 }/>
+          { showBlockInfo && <Skeleton w="100%" h={ 6 } mt={ 6 }/> }
           <Skeleton w="50%" h={ 6 } mt={ 2 }/>
           <Skeleton w="50%" h={ 6 } mt={ 2 }/>
         </Flex>

ui/txs/TxsTab.tsx

@@ -25,6 +25,7 @@ const TxsTab = ({ tab }: Props) => {
       queryName={ QueryKeys.txsPending }
       stateFilter="pending"
       apiPath="/api/transactions"
+      showBlockInfo={ false }
     />
   );
 };

ui/txs/TxsTable.tsx

@@ -15,9 +15,10 @@ type Props = {
   sort: (field: 'val' | 'fee') => () => void;
   sorting?: Sort;
   top: number;
+  showBlockInfo: boolean;
 }
 
-const TxsTable = ({ txs, sort, sorting, top }: Props) => {
+const TxsTable = ({ txs, sort, sorting, top, showBlockInfo }: Props) => {
   return (
     <Table variant="simple" minWidth="810px" size="xs">
       <TheadSticky top={ top }>
@@ -26,7 +27,7 @@ const TxsTable = ({ txs, sort, sorting, top }: Props) => {
           <Th width="20%">Type</Th>
           <Th width="18%">Txn hash</Th>
           <Th width="15%">Method</Th>
-          <Th width="11%">Block</Th>
+          { showBlockInfo && <Th width="11%">Block</Th> }
           <Th width={{ xl: '128px', base: '66px' }}>From</Th>
           <Th width={{ xl: '36px', base: '0' }}></Th>
           <Th width={{ xl: '128px', base: '66px' }}>To</Th>
@@ -51,6 +52,7 @@ const TxsTable = ({ txs, sort, sorting, top }: Props) => {
           <TxsTableItem
             key={ item.hash }
             tx={ item }
+            showBlockInfo={ showBlockInfo }
           />
         )) }
       </Tbody>

ui/txs/TxsTableItem.tsx

@@ -34,7 +34,7 @@ import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
 import TxType from './TxType';
 
-const TxsTableItem = ({ tx }: {tx: Transaction}) => {
+const TxsTableItem = ({ tx, showBlockInfo }: {tx: Transaction; showBlockInfo: boolean }) => {
   const addressFrom = (
     <Address>
       <Tooltip label={ tx.from.implementation_name }>
@@ -102,9 +102,11 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
           </TruncatedTextTooltip>
         ) : '-' }
       </Td>
-      <Td>
-        { tx.block && <Link href={ link('block', { id: tx.block.toString() }) }>{ tx.block }</Link> }
-      </Td>
+      { showBlockInfo && (
+        <Td>
+          { tx.block && <Link href={ link('block', { id: tx.block.toString() }) }>{ tx.block }</Link> }
+        </Td>
+      ) }
       <Show above="xl" ssr={ false }>
         <Td>
           { addressFrom }