fix home skeleton

ui/home/LatestTxsItem.tsx

@@ -14,7 +14,6 @@ import appConfig from 'configs/app/config';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import transactionIcon from 'icons/transactions.svg';
 import getValueWithUnit from 'lib/getValueWithUnit';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -33,16 +32,15 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
   const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
 
-  const isMobile = useIsMobile();
-
-  if (isMobile) {
   return (
+    <>
       <Box
         width="100%"
         borderTop="1px solid"
         borderColor="divider"
         py={ 4 }
         _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+        display={{ base: 'block', lg: 'none' }}
       >
         <Flex justifyContent="space-between">
           <HStack>
@@ -127,10 +125,6 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
         </Skeleton>
       </Box>
-    );
-  }
-
-  return (
       <Box
         width="100%"
         minW="700px"
@@ -138,6 +132,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
         borderColor="divider"
         p={ 4 }
         _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+        display={{ base: 'none', lg: 'block' }}
       >
         <Grid width="100%" gridTemplateColumns="3fr 2fr 150px" gridGap={ 8 }>
           <Flex overflow="hidden" w="100%">
@@ -224,6 +219,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           </Box>
         </Grid>
       </Box>
+    </>
   );
 };