mobile view

ui/address/AddressBlocksValidated.tsx

@@ -18,6 +18,8 @@ import SkeletonTable from 'ui/shared/SkeletonTable';
 import SocketAlert from 'ui/shared/SocketAlert';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
+import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
+import AddressBlocksValidatedSkeletonMobile from './blocksValidated/AddressBlocksValidatedSkeletonMobile';
 import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
 
 interface Props {
@@ -77,7 +79,7 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
             <SkeletonTable columns={ [ '12%', '12%', '12%', '14%', '25%', '25%' ] }/>
           </Hide>
           <Show below="lg">
-            loading
+            <AddressBlocksValidatedSkeletonMobile/>
           </Show>
         </>
       );
@@ -113,7 +115,9 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
           </Table>
         </Hide>
         <Show below="lg">
-          content
+          { query.data.items.map((item) => (
+            <AddressBlocksValidatedListItem key={ item.height } { ...item } page={ query.pagination.page }/>
+          )) }
         </Show>
       </>
     );

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

+import { Link, Text, Flex } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { Block } from 'types/api/block';
+
+import appConfig from 'configs/app/config';
+import getBlockTotalReward from 'lib/block/getBlockTotalReward';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import link from 'lib/link/link';
+import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import Utilization from 'ui/shared/Utilization/Utilization';
+
+type Props = Block & {
+  page: number;
+};
+
+const AddressBlocksValidatedListItem = (props: Props) => {
+  const blockUrl = link('block', { id: String(props.height) });
+  const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
+  const totalReward = getBlockTotalReward(props);
+
+  return (
+    <AccountListItemMobile rowGap={ 2 }>
+      <Flex justifyContent="space-between" w="100%">
+        <Link href={ blockUrl } fontWeight="700">{ props.height }</Link>
+        <Text variant="secondary">{ timeAgo }</Text>
+      </Flex>
+      <Flex columnGap={ 2 } w="100%">
+        <Text fontWeight={ 500 } flexShrink={ 0 }>Txn</Text>
+        <Text variant="secondary">{ props.tx_count }</Text>
+      </Flex>
+      <Flex columnGap={ 2 } w="100%">
+        <Text fontWeight={ 500 } flexShrink={ 0 }>Difficulty</Text>
+        <Text variant="secondary">0.00 TH</Text>
+      </Flex>
+      <Flex columnGap={ 2 } w="100%">
+        <Text fontWeight={ 500 } flexShrink={ 0 }>Gas used</Text>
+        <Text variant="secondary">{ BigNumber(props.gas_used || 0).toFormat() }</Text>
+        <Utilization colorScheme="gray" value={ BigNumber(props.gas_used || 0).dividedBy(BigNumber(props.gas_limit)).toNumber() }/>
+      </Flex>
+      <Flex columnGap={ 2 } w="100%">
+        <Text fontWeight={ 500 } flexShrink={ 0 }>Reward { appConfig.network.currency.symbol }</Text>
+        <Text variant="secondary">{ totalReward }</Text>
+      </Flex>
+    </AccountListItemMobile>
+  );
+};
+
+export default React.memo(AddressBlocksValidatedListItem);

ui/address/blocksValidated/AddressBlocksValidatedSkeletonMobile.tsx

+import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const AddressBlocksValidatedSkeletonMobile = () => {
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  return (
+    <Box>
+      { Array.from(Array(2)).map((item, index) => (
+        <Flex
+          key={ index }
+          rowGap={ 3 }
+          flexDirection="column"
+          paddingY={ 6 }
+          borderTopWidth="1px"
+          borderColor={ borderColor }
+          _last={{
+            borderBottomWidth: '1px',
+          }}
+        >
+          <Flex justifyContent="space-between" w="100%" h={ 6 }>
+            <Skeleton w="100px"/>
+            <Skeleton w="100px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="40px"/>
+            <Skeleton w="40px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="70px"/>
+            <Skeleton w="70px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="70px"/>
+            <Skeleton w="180px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="100px"/>
+            <Skeleton w="120px"/>
+          </Flex>
+        </Flex>
+      )) }
+    </Box>
+  );
+};
+
+export default AddressBlocksValidatedSkeletonMobile;

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -23,7 +23,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
   const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
-    <AccountListItemMobile fontSize="sm" rowGap={ 2 }>
+    <AccountListItemMobile rowGap={ 2 }>
       <Flex justifyContent="space-between" w="100%">
         <Text fontWeight={ 600 }>{ BigNumber(props.value).div(WEI).toFixed(8) } { appConfig.network.currency.symbol }</Text>
         <Stat flexGrow="0">