block txs tab

ui/block/BlockTxs.tsx

+import React from 'react';
+
+import TxsContent from 'ui/txs/TxsContent';
+
+const BlockTxs = () => {
+  return <TxsContent showDescription={ false } showSortButton={ false }/>;
+};
+
+export default BlockTxs;

ui/pages/Block.tsx

@@ -4,13 +4,14 @@ import React from 'react';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import BlockDetails from 'ui/block/BlockDetails';
+import BlockTxs from 'ui/block/BlockTxs';
 import Page from 'ui/shared/Page';
 import PageHeader from 'ui/shared/PageHeader';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
 const TABS: Array<RoutedTab> = [
   { routeName: 'block_index', title: 'Details', component: <BlockDetails/> },
-  { routeName: 'block_txs', title: 'Transactions', component: <div>Transactions</div> },
+  { routeName: 'block_txs', title: 'Transactions', component: <BlockTxs/> },
 ];
 
 export interface Props {

ui/txs/TxsContent.tsx

@@ -14,10 +14,11 @@ import TxsListItem from './TxsListItem';
 import TxsTable from './TxsTable';
 
 type Props = {
-  isPending?: boolean;
+  showDescription?: boolean;
+  showSortButton?: boolean;
 }
 
-const TxsContent = ({ isPending }: Props) => {
+const TxsContent = ({ showSortButton = true, showDescription = true }: Props) => {
   const isMobile = useIsMobile();
 
   const [ sorting, setSorting ] = useState<Sort>();
@@ -70,7 +71,7 @@ const TxsContent = ({ isPending }: Props) => {
 
   return (
     <>
-      { !isPending && <Box mb={ 12 }>Only the first 10,000 elements are displayed</Box> }
+      { showDescription && <Box mb={ 12 }>Only the first 10,000 elements are displayed</Box> }
       <HStack mb={ 6 }>
         { /* TODO */ }
         <FilterButton
@@ -80,11 +81,13 @@ const TxsContent = ({ isPending }: Props) => {
           onClick={ () => {} }
           appliedFiltersNum={ 0 }
         />
+        { showSortButton && (
           <SortButton
             // eslint-disable-next-line react/jsx-no-bind
             handleSort={ () => {} }
             isSortActive={ Boolean(sorting) }
           />
+        ) }
         <FilterInput
           // eslint-disable-next-line react/jsx-no-bind
           onChange={ () => {} }

ui/txs/TxsPending.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import TxsContent from './TxsContent';
 
 const TxsPending = () => {
-  return <TxsContent isPending/>;
+  return <TxsContent showDescription={ false }/>;
 };
 
 export default TxsPending;