mobile view

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

-import { Box, Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import { Box, Hide, Show, Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -8,9 +8,11 @@ import { QueryKeys } from 'types/client/queries';
 import appConfig from 'configs/app/config';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import ActionBar from 'ui/shared/ActionBar';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
+import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
 import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
 
 interface Props {
@@ -26,19 +28,20 @@ const AddressCoinBalanceHistory = ({ addressQuery }: Props) => {
     },
   });
 
-  if (query.isError || query.isLoading) {
+  const isPaginatorHidden = !query.isLoading && !query.isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
+
+  const content = (() => {
+    if (query.isLoading) {
       return <Box>loading</Box>;
     }
 
-  const isPaginatorHidden = !query.isLoading && !query.isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
+    if (query.isError) {
+      return <DataFetchAlert/>;
+    }
 
     return (
-    <Box mt={ 8 }>
-      { !isPaginatorHidden && (
-        <ActionBar>
-          <Pagination ml="auto" { ...query.pagination }/>
-        </ActionBar>
-      ) }
+      <>
+        <Hide below="lg">
           <Table variant="simple" size="sm">
             <Thead top={ 80 }>
               <Tr>
@@ -55,6 +58,24 @@ const AddressCoinBalanceHistory = ({ addressQuery }: Props) => {
               )) }
             </Tbody>
           </Table>
+        </Hide>
+        <Show below="lg">
+          { query.data.items.map((item) => (
+            <AddressCoinBalanceListItem key={ item.block_number } { ...item }/>
+          )) }
+        </Show>
+      </>
+    );
+  })();
+
+  return (
+    <Box mt={ 8 }>
+      { !isPaginatorHidden && (
+        <ActionBar>
+          <Pagination ml="auto" { ...query.pagination }/>
+        </ActionBar>
+      ) }
+      { content }
     </Box>
   );
 };

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

+import { Link, Text, Stat, StatHelpText, StatArrow, Flex } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
+
+import appConfig from 'configs/app/config';
+import { WEI, ZERO } from 'lib/consts';
+import dayjs from 'lib/date/dayjs';
+import link from 'lib/link/link';
+import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import Address from 'ui/shared/address/Address';
+import AddressLink from 'ui/shared/address/AddressLink';
+
+type Props = AddressCoinBalanceHistoryItem;
+
+const AddressCoinBalanceListItem = (props: Props) => {
+  const blockUrl = link('block', { id: String(props.block_number) });
+  const deltaBn = BigNumber(props.delta).div(WEI);
+  const isPositiveDelta = deltaBn.gte(ZERO);
+
+  return (
+    <AccountListItemMobile fontSize="sm" rowGap={ 2 }>
+      <Flex justifyContent="space-between" w="100%">
+        <Text fontWeight={ 600 }>{ BigNumber(props.value).div(WEI).toFormat() } { appConfig.network.currency.symbol }</Text>
+        <Stat flexGrow="0">
+          <StatHelpText display="flex" mb={ 0 } alignItems="center">
+            <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
+            <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
+              { deltaBn.toFixed(8) }
+            </Text>
+          </StatHelpText>
+        </Stat>
+      </Flex>
+      <Flex columnGap={ 2 } w="100%">
+        <Text fontWeight={ 500 } flexShrink={ 0 }>Block</Text>
+        <Link href={ blockUrl } fontWeight="700">{ props.block_number }</Link>
+      </Flex>
+      { props.transaction_hash && (
+        <Flex columnGap={ 2 } w="100%">
+          <Text fontWeight={ 500 } flexShrink={ 0 }>Txs</Text>
+          <Address maxW="150px" fontWeight="700">
+            <AddressLink hash={ props.transaction_hash } type="transaction"/>
+          </Address>
+        </Flex>
+      ) }
+      <Flex columnGap={ 2 } w="100%">
+        <Text fontWeight={ 500 } flexShrink={ 0 }>Age</Text>
+        <Text variant="secondary">{ dayjs(props.block_timestamp).fromNow() }</Text>
+      </Flex>
+    </AccountListItemMobile>
+  );
+};
+
+export default React.memo(AddressCoinBalanceListItem);