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,12 +28,46 @@ const AddressCoinBalanceHistory = ({ addressQuery }: Props) => {
     },
   });
 
-  if (query.isError || query.isLoading) {
-    return <Box>loading</Box>;
-  }
-
   const isPaginatorHidden = !query.isLoading && !query.isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
 
+  const content = (() => {
+    if (query.isLoading) {
+      return <Box>loading</Box>;
+    }
+
+    if (query.isError) {
+      return <DataFetchAlert/>;
+    }
+
+    return (
+      <>
+        <Hide below="lg">
+          <Table variant="simple" size="sm">
+            <Thead top={ 80 }>
+              <Tr>
+                <Th width="25%">Block</Th>
+                <Th width="25%">Txn</Th>
+                <Th width="25%">Age</Th>
+                <Th width="25%" isNumeric pr={ 1 }/>
+                <Th width="120px" isNumeric>Balance { appConfig.network.currency.symbol }</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              { query.data.items.map((item) => (
+                <AddressCoinBalanceTableItem key={ item.block_number } { ...item }/>
+              )) }
+            </Tbody>
+          </Table>
+        </Hide>
+        <Show below="lg">
+          { query.data.items.map((item) => (
+            <AddressCoinBalanceListItem key={ item.block_number } { ...item }/>
+          )) }
+        </Show>
+      </>
+    );
+  })();
+
   return (
     <Box mt={ 8 }>
       { !isPaginatorHidden && (
@@ -39,22 +75,7 @@ const AddressCoinBalanceHistory = ({ addressQuery }: Props) => {
           <Pagination ml="auto" { ...query.pagination }/>
         </ActionBar>
       ) }
-      <Table variant="simple" size="sm">
-        <Thead top={ 80 }>
-          <Tr>
-            <Th width="25%">Block</Th>
-            <Th width="25%">Txn</Th>
-            <Th width="25%">Age</Th>
-            <Th width="25%" isNumeric pr={ 1 }/>
-            <Th width="120px" isNumeric>Balance { appConfig.network.currency.symbol }</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          { query.data.items.map((item) => (
-            <AddressCoinBalanceTableItem key={ item.block_number } { ...item }/>
-          )) }
-        </Tbody>
-      </Table>
+      { 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);