adapt internal txs tab

data/txInternal.ts

@@ -11,7 +11,7 @@ export const data = [
   {
     id: 2,
     type: 'delegate call',
-    status: 'error' as const,
+    status: 'success' as const,
     from: '0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45',
     to: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01',
     value: 0.5633333,
@@ -20,7 +20,7 @@ export const data = [
   {
     id: 3,
     type: 'static call',
-    status: 'success' as const,
+    status: 'error' as const,
     from: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830',
     to: '0x35317007D203b8a86CA727ad44E473E40450E378',
     value: 0.421152366,

ui/pages/Transaction.tsx

@@ -32,6 +32,7 @@ const TransactionPageContent = ({ tab }: Props) => {
 
   return (
     <Page>
+      { /* TODO should be shown only when navigating from txs list */ }
       <Link mb={ 6 } display="inline-flex" href={ link('txs') }>
         <Icon as={ leftArrowIcon } boxSize={ 6 } mr={ 2 }/>
         Transactions

ui/shared/AccountListItemMobile.tsx

-import { VStack, useColorModeValue } from '@chakra-ui/react';
+import { Flex, useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
-const AccountListItemMobile = ({ children }: Props) => {
+const AccountListItemMobile = ({ children, className }: Props) => {
   return (
-    <VStack
-      gap={ 4 }
+    <Flex
+      rowGap={ 6 }
       alignItems="flex-start"
+      flexDirection="column"
       paddingY={ 6 }
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       borderTopWidth="1px"
       _last={{
         borderBottomWidth: '1px',
       }}
+      className={ className }
     >
       { children }
-    </VStack>
+    </Flex>
   );
 };
 
-export default AccountListItemMobile;
+export default chakra(AccountListItemMobile);

ui/shared/AddressSnippet.tsx

@@ -19,7 +19,7 @@ const AddressSnippet = ({ address, subtitle }: Props) => {
         <AddressLink hash={ address } fontWeight="600" ml={ 2 }/>
         <CopyToClipboard text={ address } ml={ 1 }/>
       </Address>
-      { subtitle && <Text fontSize="sm" variant="secondary" mt={ 0.5 } ml={{ base: 0, lg: 8 }}>{ subtitle }</Text> }
+      { subtitle && <Text fontSize="sm" variant="secondary" mt={ 0.5 } ml={ 8 }>{ subtitle }</Text> }
     </Box>
   );
 };

ui/shared/Filters.tsx

@@ -32,10 +32,11 @@ const Filters = () => {
         size="sm"
         variant="outline"
         colorScheme="gray-dark"
-        borderWidth="1px"
+        fontWeight="500"
         onClick={ handleClick }
         isActive={ isActive }
-        px={ 1.5 }
+        px={ 2 }
+        flexShrink={ 0 }
       >
         Filter
       </Button>
@@ -47,6 +48,8 @@ const Filters = () => {
           paddingInlineStart="38px"
           placeholder="Search by addresses, hash, method..."
           ml="1px"
+          borderWidth="2px"
+          textOverflow="ellipsis"
           onChange={ handleChange }
           borderColor={ inputBorderColor }
           value={ value }

ui/tx/TxInternals.tsx

-import { Box, Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import { data } from 'data/txInternal';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import Filters from 'ui/shared/Filters';
-import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
+import TxInternalsList from 'ui/tx/internals/TxInternalsList';
+import TxInternalsTable from 'ui/tx/internals/TxInternalsTable';
 
 const TxInternals = () => {
+  const isMobile = useIsMobile();
+
+  const list = isMobile ? <TxInternalsList/> : <TxInternalsTable/>;
+
   return (
     <Box>
       <Filters/>
-      <TableContainer width="100%" mt={ 6 }>
-        <Table variant="simple" minWidth="950px" size="sm">
-          <Thead>
-            <Tr>
-              <Th width="20%">Type</Th>
-              <Th width="calc(20% + 40px)" pr="0">From</Th>
-              <Th width="calc(20% - 40px)" pl="0">To</Th>
-              <Th width="20%" isNumeric>Value</Th>
-              <Th width="20%" isNumeric>Gas limit</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            { data.map((item) => (
-              <TxInternalsTableItem
-                key={ item.id }
-                { ...item }
-              />
-            )) }
-          </Tbody>
-        </Table>
-      </TableContainer>
+      { list }
     </Box>
   );
 };

ui/tx/internals/TxInternalsList.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { data } from 'data/txInternal';
+import TxInternalsListItem from 'ui/tx/internals/TxInternalsListItem';
+
+const TxInternalsList = () => {
+  return (
+    <Box mt={ 6 }>
+      { data.map((item) => <TxInternalsListItem key={ item.id } { ...item }/>) }
+    </Box>
+  );
+};
+
+export default TxInternalsList;

ui/tx/internals/TxInternalsListItem.tsx

+import { Flex, Tag, Icon, Box, HStack, Text } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
+import React from 'react';
+
+import type ArrayElement from 'types/utils/ArrayElement';
+
+import type { data } from 'data/txInternal';
+import rightArrowIcon from 'icons/arrows/right.svg';
+import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+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/tx/TxStatus';
+
+type Props = ArrayElement<typeof data>;
+
+const TxInternalsListItem = ({ type, status, from, to, value, gasLimit }: Props) => {
+  return (
+    <AccountListItemMobile rowGap={ 3 }>
+      <Flex>
+        <Tag colorScheme="cyan" mr={ 2 }>{ capitalize(type) }</Tag>
+        <TxStatus status={ status }/>
+      </Flex>
+      <Box w="100%" display="inline-grid" gridTemplateColumns="1fr auto 1fr" columnGap={ 3 }>
+        <Address>
+          <AddressIcon hash={ from }/>
+          <AddressLink ml={ 2 } fontWeight="500" hash={ from }/>
+        </Address>
+        <Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500"/>
+        <Address>
+          <AddressIcon hash={ to }/>
+          <AddressLink ml={ 2 } fontWeight="500" hash={ to }/>
+        </Address>
+      </Box>
+      <HStack spacing={ 3 }>
+        <Text fontSize="sm" fontWeight={ 500 }>Value xDAI</Text>
+        <Text fontSize="sm" variant="secondary">{ value }</Text>
+      </HStack>
+      <HStack spacing={ 3 }>
+        <Text fontSize="sm" fontWeight={ 500 }>Gas limit</Text>
+        <Text fontSize="sm" variant="secondary">{ gasLimit.toLocaleString('en') }</Text>
+      </HStack>
+    </AccountListItemMobile>
+  );
+};
+
+export default TxInternalsListItem;

ui/tx/internals/TxInternalsTable.tsx

+import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import React from 'react';
+
+import { data } from 'data/txInternal';
+import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
+
+const TxInternalsTable = () => {
+  return (
+    <TableContainer width="100%" mt={ 6 }>
+      <Table variant="simple" size="sm">
+        <Thead>
+          <Tr>
+            <Th width="26%">Type</Th>
+            <Th width="calc(20% + 40px)" pr="0">From</Th>
+            <Th width="calc(20% - 40px)" pl="0">To</Th>
+            <Th width="17%" isNumeric>Value</Th>
+            <Th width="17%" isNumeric>Gas limit</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          { data.map((item) => (
+            <TxInternalsTableItem
+              key={ item.id }
+              { ...item }
+            />
+          )) }
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TxInternalsTable;