mobile view

ui/txs/TxAdditionalInfoButton.tsx

+import {
+  Icon,
+  Center,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import infoIcon from 'icons/info.svg';
+
+const TxAdditionalInfoButton = ({ isOpen, onClick }: {isOpen?: boolean; onClick?: () => void}) => {
+
+  const infoBgColor = useColorModeValue('blue.50', 'gray.600');
+  const infoColor = useColorModeValue('blue.600', 'blue.300');
+
+  return (
+    <Center background={ isOpen ? infoBgColor : 'unset' } borderRadius="8px" w="30px" h="30px" onClick={ onClick }>
+      <Icon
+        as={ infoIcon }
+        boxSize={ 5 }
+        color={ infoColor }
+        _hover={{ color: 'blue.400' }}
+      />
+    </Center>
+  );
+};
+
+export default TxAdditionalInfoButton;

ui/txs/TxsList.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { txs } from 'data/txs';
+import TxsListItem from 'ui/txs/TxsListItem';
+
+const TxsList = () => {
+  return (
+    <Box>
+      { txs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }
+    </Box>
+  );
+};
+
+export default TxsList;

ui/txs/TxsListItem.tsx

+import {
+  HStack,
+  Box,
+  Flex,
+  Icon,
+  Link,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerOverlay,
+  //   Modal,
+  //   ModalContent,
+  //   ModalCloseButton,
+  Text,
+  Tooltip,
+  useColorModeValue,
+  useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import rightArrowIcon from 'icons/arrows/right.svg';
+import transactionIcon from 'icons/transactions.svg';
+import dayjs from 'lib/date/dayjs';
+import useLink from 'lib/link/useLink';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
+import TxStatus from 'ui/shared/TxStatus';
+import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
+import TxAdditionalInfoButton from 'ui/txs/TxAdditionalInfoButton';
+import TxType from 'ui/txs/TxType';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TxsListItem = ({ tx }: {tx: any}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const iconColor = useColorModeValue('blue.600', 'blue.300');
+  const secondaryTextColor = useColorModeValue('gray.500', 'gray.400');
+
+  const link = useLink();
+
+  return (
+    <>
+      <Box width="100%" borderBottom="1px solid" borderColor="blackAlpha.200" _first={{ borderTop: '1px solid', borderColor: 'blackAlpha.200' }}>
+        <Flex justifyContent="space-between" mt={ 4 }>
+          <HStack>
+            <TxType type={ tx.txType }/>
+            <TxStatus status={ tx.status } errorText={ tx.errorText }/>
+          </HStack>
+          <TxAdditionalInfoButton onClick={ onOpen }/>
+        </Flex>
+        <Flex justifyContent="space-between" lineHeight="24px" mt={ 3 }>
+          <Flex>
+            <Icon
+              as={ transactionIcon }
+              boxSize="30px"
+              mr={ 2 }
+              color={ iconColor }
+            />
+            <Address width="100%">
+              <AddressLink
+                hash={ tx.hash }
+                type="transaction"
+                fontWeight="700"
+                truncation="constant"
+              />
+            </Address>
+          </Flex>
+          <Text color={ secondaryTextColor } fontWeight="400">{ dayjs(tx.timestamp).fromNow() }</Text>
+        </Flex>
+        <Flex mt={ 3 }>
+          <Text as="span" whiteSpace="pre">Method </Text>
+          <Box
+            color={ secondaryTextColor }
+            overflow="hidden"
+            whiteSpace="nowrap"
+            textOverflow="ellipsis"
+          >
+            { tx.method }
+          </Box>
+        </Flex>
+        <Box mt={ 2 }>
+          <Text as="span">Block </Text>
+          <Link href={ link('block', { id: tx.block_num }) }>{ tx.block_num }</Link>
+        </Box>
+        <Flex alignItems="center" height={ 6 } mt={ 6 }>
+          <Address width="calc((100%-40px)/2)">
+            <Tooltip label={ tx.address_from.type } shouldWrapChildren>
+              <AddressIcon hash={ tx.address_from.hash }/>
+            </Tooltip>
+            <AddressLink
+              hash={ tx.address_from.hash }
+              alias={ tx.address_from.alias }
+              fontWeight="500"
+              ml={ 2 }
+              truncation="constant"
+            />
+          </Address>
+          <Icon
+            as={ rightArrowIcon }
+            boxSize={ 6 }
+            mx={ 2 }
+            color="gray.500"
+          />
+          <Address width="calc((100%-40px)/2)">
+            <Tooltip label={ tx.address_to.type } shouldWrapChildren>
+              <AddressIcon hash={ tx.address_to.hash }/>
+            </Tooltip>
+            <AddressLink
+              hash={ tx.address_to.hash }
+              alias={ tx.address_to.alias }
+              fontWeight="500"
+              ml={ 2 }
+              truncation="constant"
+            />
+          </Address>
+        </Flex>
+        <Box mt={ 2 }>
+          <Text as="span">Value xDAI </Text>
+          <Text as="span" color={ secondaryTextColor }>{ tx.amount.value.toFixed(8) }</Text>
+        </Box>
+        <Box mt={ 2 } mb={ 3 }>
+          <Text as="span">Fee xDAI </Text>
+          <Text as="span" color={ secondaryTextColor }>{ tx.fee.value.toFixed(8) }</Text>
+        </Box>
+      </Box>
+      { /* <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>
+    </>
+  );
+};
+
+export default TxsListItem;

ui/txs/TxsTable.tsx

@@ -31,7 +31,7 @@ const TxsTable = () => {
           { txs.map((item) => (
             <TxsTableItem
               key={ item.hash }
-              { ...item }
+              tx={ item }
             />
           )) }
         </Tbody>

ui/txs/TxsTableItem.tsx

@@ -13,13 +13,11 @@ import {
   PopoverContent,
   PopoverBody,
   useBreakpointValue,
-  Center,
   useColorModeValue,
 } from '@chakra-ui/react';
 import React from 'react';
 
 import rightArrowIcon from 'icons/arrows/right.svg';
-import infoIcon from 'icons/info.svg';
 import dayjs from 'lib/date/dayjs';
 import useLink from 'lib/link/useLink';
 import Address from 'ui/shared/address/Address';
@@ -28,35 +26,34 @@ import AddressLink from 'ui/shared/address/AddressLink';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 import TxStatus from 'ui/shared/TxStatus';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
+import TxAdditionalInfoButton from 'ui/txs/TxAdditionalInfoButton';
 
 import TxType from './TxType';
 
-const TxsTableItem = (item) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TxsTableItem = ({ tx }: {tx: any}) => {
   const link = useLink();
 
   const isLargeScreen = useBreakpointValue({ base: false, xl: true });
 
   const addressFrom = (
     <Address>
-      <Tooltip label={ item.address_from.type } shouldWrapChildren>
-        <AddressIcon hash={ item.address_from.hash }/>
+      <Tooltip label={ tx.address_from.type } shouldWrapChildren>
+        <AddressIcon hash={ tx.address_from.hash }/>
       </Tooltip>
-      <AddressLink hash={ item.address_from.hash } alias={ item.address_from.alias } fontWeight="500" ml={ 2 }/>
+      <AddressLink hash={ tx.address_from.hash } alias={ tx.address_from.alias } fontWeight="500" ml={ 2 }/>
     </Address>
   );
 
   const addressTo = (
     <Address>
-      <Tooltip label={ item.address_to.type } shouldWrapChildren>
-        <AddressIcon hash={ item.address_to.hash }/>
+      <Tooltip label={ tx.address_to.type } shouldWrapChildren>
+        <AddressIcon hash={ tx.address_to.hash }/>
       </Tooltip>
-      <AddressLink hash={ item.address_to.hash } alias={ item.address_to.alias } fontWeight="500" ml={ 2 }/>
+      <AddressLink hash={ tx.address_to.hash } alias={ tx.address_to.alias } fontWeight="500" ml={ 2 }/>
     </Address>
   );
 
-  const infoBgColor = useColorModeValue('blue.50', 'gray.600');
-  const infoColor = useColorModeValue('blue.600', 'blue.300');
-
   const infoBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
   return (
     <Tr>
@@ -65,18 +62,11 @@ const TxsTableItem = (item) => {
           { ({ isOpen }) => (
             <>
               <PopoverTrigger>
-                <Center background={ isOpen ? infoBgColor : 'unset' } borderRadius="8px" w="30px" h="30px">
-                  <Icon
-                    as={ infoIcon }
-                    boxSize={ 5 }
-                    color={ infoColor }
-                    _hover={{ color: 'blue.400' }}
-                  />
-                </Center>
+                <TxAdditionalInfoButton isOpen={ isOpen }/>
               </PopoverTrigger>
               <PopoverContent border="1px solid" borderColor={ infoBorderColor }>
                 <PopoverBody>
-                  <TxAdditionalInfo tx={ item }/>
+                  <TxAdditionalInfo tx={ tx }/>
                 </PopoverBody>
               </PopoverContent>
             </>
@@ -85,33 +75,33 @@ const TxsTableItem = (item) => {
       </Td>
       <Td>
         <VStack alignItems="start">
-          <TxType type={ item.txType }/>
-          <TxStatus status={ item.status } errorText={ item.errorText }/>
+          <TxType type={ tx.txType }/>
+          <TxStatus status={ tx.status } errorText={ tx.errorText }/>
         </VStack>
       </Td>
       <Td>
         <VStack alignItems="start" lineHeight="24px">
           <Address width="100%">
             <AddressLink
-              hash={ item.hash }
+              hash={ tx.hash }
               type="transaction"
               fontWeight="700"
             />
           </Address>
-          <Text color="gray.500" fontWeight="400">{ dayjs(item.timestamp).fromNow() }</Text>
+          <Text color="gray.500" fontWeight="400">{ dayjs(tx.timestamp).fromNow() }</Text>
         </VStack>
       </Td>
       <Td>
-        <TruncatedTextTooltip label={ item.method }>
+        <TruncatedTextTooltip label={ tx.method }>
           <Tag
-            colorScheme={ item.method === 'Multicall' ? 'teal' : 'gray' }
+            colorScheme={ tx.method === 'Multicall' ? 'teal' : 'gray' }
           >
-            { item.method }
+            { tx.method }
           </Tag>
         </TruncatedTextTooltip>
       </Td>
       <Td>
-        <Link href={ link('block', { id: item.block_num }) }>{ item.block_num }</Link>
+        <Link href={ link('block', { id: tx.block_num }) }>{ tx.block_num }</Link>
       </Td>
       { isLargeScreen ? (
         <>
@@ -142,10 +132,10 @@ const TxsTableItem = (item) => {
         </Td>
       ) }
       <Td isNumeric>
-        { item.amount.value.toFixed(8) }
+        { tx.amount.value.toFixed(8) }
       </Td>
       <Td isNumeric>
-        { item.fee.value.toFixed(8) }
+        { tx.fee.value.toFixed(8) }
       </Td>
     </Tr>
   );

ui/txs/TxsValidated.tsx

 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import Filters from 'ui/shared/Filters';
 
+import TxsList from './TxsList';
 import TxsTable from './TxsTable';
 
 const TxsValidated = () => {
+  const isMobile = useIsMobile();
   return (
     <>
       <Box mb={ 12 }>Only the first 10,000 elements are displayed</Box>
       <Box mb={ 6 }><Filters/></Box>
-      <TxsTable/>
+      { isMobile ? <TxsList/> : <TxsTable/> }
       { /* pagination */ }
     </>
   );