pagination

ui/txs/Pagination.tsx

+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+import { Button, Flex, Input, IconButton } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  currentPage: number;
+  maxPage?: number;
+  isMobile?: boolean;
+}
+
+const MAX_PAGE_DEFAULT = 50;
+
+const Pagination = ({ currentPage, maxPage, isMobile }: Props) => {
+
+  return (
+    <Flex
+      fontSize="sm"
+      width={ isMobile ? '100%' : '434px' }
+      justifyContent="space-between"
+    >
+      <Flex alignItems="center" justifyContent="space-between" flexGrow={ 1 }>
+        <IconButton
+          variant="outline"
+          size="sm"
+          aria-label="Next page"
+          w="36px"
+          icon={ <ChevronLeftIcon w={ 5 } h={ 5 }/> }
+        />
+        <Flex alignItems="center">
+          <Button
+            variant="outline"
+            colorScheme="gray"
+            size="sm"
+            isActive
+            borderWidth="1px"
+            fontWeight={ 400 }
+            mr={ 3 }
+            h={ 8 }
+          >
+            { currentPage }
+          </Button>
+          of
+          <Button
+            variant="outline"
+            colorScheme="gray"
+            size="sm"
+            width={ 8 }
+            borderWidth="1px"
+            fontWeight={ 400 }
+            ml={ 3 }
+          >
+            { maxPage || MAX_PAGE_DEFAULT }
+          </Button>
+        </Flex>
+        <IconButton
+          variant="outline"
+          size="sm"
+          aria-label="Next page"
+          w="36px"
+          icon={ <ChevronRightIcon w={ 5 } h={ 5 }/> }
+        />
+      </Flex>
+      { !isMobile && (
+        <Flex alignItems="center" width="132px" ml={ 16 }>
+            Go to <Input w="84px" h="32px" size="sm" ml={ 2 }/>
+        </Flex>
+      ) }
+    </Flex>
+  );
+};
+
+export default Pagination;

ui/txs/TxsListItem.tsx

@@ -4,14 +4,9 @@ import {
   Flex,
   Icon,
   Link,
-  Drawer,
-  DrawerBody,
-  DrawerContent,
-  DrawerCloseButton,
-  DrawerOverlay,
-  //   Modal,
-  //   ModalContent,
-  //   ModalCloseButton,
+  Modal,
+  ModalContent,
+  ModalCloseButton,
   Text,
   Tooltip,
   useColorModeValue,
@@ -124,23 +119,12 @@ const TxsListItem = ({ tx }: {tx: any}) => {
           <Text as="span" color={ secondaryTextColor }>{ tx.fee.value.toFixed(8) }</Text>
         </Box>
       </Box>
-      { /* <Modal isOpen={ isOpen } onClose={ onClose } size="full">
+      <Modal isOpen={ isOpen } onClose={ onClose } size="full">
         <ModalContent paddingTop={ 4 }>
           <ModalCloseButton/>
           <TxAdditionalInfo tx={ tx }/>
         </ModalContent>
-      </Modal> */ }
-      <Drawer
-        isOpen={ isOpen }
-        placement="bottom"
-        onClose={ onClose }
-      >
-        <DrawerOverlay/>
-        <DrawerContent>
-          <DrawerCloseButton/>
-          <DrawerBody p={ 6 }>          <TxAdditionalInfo tx={ tx }/></DrawerBody>
-        </DrawerContent>
-      </Drawer>
+      </Modal>
     </>
   );
 };

ui/txs/TxsValidated.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import Filters from 'ui/shared/Filters';
 
+import Pagination from './Pagination';
 import TxsList from './TxsList';
 import TxsTable from './TxsTable';
 
@@ -14,7 +15,9 @@ const TxsValidated = () => {
       <Box mb={ 12 }>Only the first 10,000 elements are displayed</Box>
       <Box mb={ 6 }><Filters/></Box>
       { isMobile ? <TxsList/> : <TxsTable/> }
-      { /* pagination */ }
+      <Box mx={ isMobile ? 0 : 6 } my={ isMobile ? 6 : 3 }>
+        <Pagination currentPage={ 1 } isMobile={ isMobile }/>
+      </Box>
     </>
   );
 };