Fix tx information (#102)

* Fix txs card

* Fix tx title

* Fix timestamps

* Fix grid layout

* Delete padding

src/components/Blocks/Detail.tsx

@@ -51,7 +51,8 @@ const DetailsTab = ({ block }: { block: IChainBlockInfoResponse }) => {
   const proposer = ensure0x(block.header.proposerAddress)
   const height = block.header.height
   const hash = ensure0x(block.hash)
-  const date = new Date(block.header.time)
+  const { format } = useDateFns()
+  const date = format(new Date(block.header.time), 'PPPpp')
 
   const { t } = useTranslation()
 
@@ -62,7 +63,7 @@ const DetailsTab = ({ block }: { block: IChainBlockInfoResponse }) => {
     },
     {
       label: t('blocks.timestamp', { defaultValue: 'Timestamp' }),
-      children: date.toString(),
+      children: date,
     },
     {
       label: t('blocks.transactions', { defaultValue: 'Transactions' }),

src/components/Layout/DetailsGrid.tsx

@@ -24,7 +24,7 @@ export const DetailsGrid = ({ details, ...rest }: { details: GridItemProps[] } &
 const DetailRow = ({ label, info, isNumber, children }: GridItemProps) => {
   return (
     <>
-      <GridItem py={1} lineHeight={{ base: 5, lg: 6 }} _notFirst={{ mt: { base: 3, lg: 0 } }}>
+      <GridItem py={1} lineHeight={{ base: 5, lg: 6 }}>
         <Flex columnGap={2} alignItems='flex-start'>
           {info && <Hint label={info} isLoading={false} my={{ lg: '2px' }} />}
           <Text my={{ lg: '2px' }} lineHeight={{ base: 5, lg: 6 }} align={'left'}>

src/components/Layout/IconLink.tsx

@@ -1,13 +1,13 @@
-import { Flex, Icon, IconProps, Link } from '@chakra-ui/react'
+import { Box, Flex, Icon, IconProps, Link, Text } from '@chakra-ui/react'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { PropsWithChildren } from 'react'
 import { RoutePath } from '~constants'
-import { HiOutlineCube } from 'react-icons/hi2'
 import { IconType } from 'react-icons'
+import { Icons } from '~src/theme/components/Icons'
 
 export const BlockIconLink = ({ height }: { height: number }) => (
   <IconLink
-    icon={HiOutlineCube}
+    icon={Icons.BlockIcon}
     to={generatePath(RoutePath.Block, {
       height: height.toString(),
       page: null,
@@ -28,7 +28,7 @@ export const IconLink = ({ to, icon, children, ...iconProps }: IconLinkProps & P
     <Link as={RouterLink} to={to}>
       <Flex align='center' gap={2}>
         <Icon as={icon} {...iconProps} />
-        <span>{children}</span>
+        <Box>{children}</Box>
       </Flex>
     </Link>
   )

src/components/Transactions/Detail.tsx

@@ -33,7 +33,9 @@ export const TransactionDetail = (tx: Tx) => {
     <Flex direction={'column'} mt={'40px'} gap={6}>
       <VStack align='start'>
         <Heading isTruncated wordBreak='break-word' mb={0}>
-          <Trans i18nKey={'transactions.tx_detail'}>Transaction Details</Trans>
+          <Trans i18nKey={'transactions.tx_title'} number={tx.txInfo.transactionNumber}>
+            Transaction #{{ number: tx.txInfo.transactionNumber }}
+          </Trans>
         </Heading>
         {createdOn && (
           <Text mt={0} fontWeight={'bold'} color={'lighterText'}>

src/components/Transactions/TransactionCard.tsx

@@ -5,6 +5,7 @@ import { generatePath } from 'react-router-dom'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { RoutePath } from '~constants'
 import LinkCard from '~components/Layout/LinkCard'
+import { BlockIconLink } from '~components/Layout/IconLink'
 
 export const TransactionTypeBadge = ({ transactionType }: { transactionType: TransactionType }) => {
   return (
@@ -30,21 +31,17 @@ export const TransactionCard = ({
       })}
     >
       <CardBody>
-        <Flex gap={1} direction={'column'}>
-          <Flex gap={3} direction={'column'}>
-            <Box>
-              <TransactionTypeBadge transactionType={transactionType} />
-            </Box>
-            <Text fontWeight='bold'># {transactionNumber}</Text>
+        <Flex gap={3} direction={'column'}>
+          <Flex gap={2}>
+            <TransactionTypeBadge transactionType={transactionType} />
+            <BlockIconLink height={blockHeight} />
+          </Flex>
+          <Text fontWeight='bold'># {transactionNumber}</Text>
+          <Flex gap={2} align={'center'}>
+            <ReducedTextAndCopy fontSize={'sm'} color={'textAccent1'} toCopy={transactionHash}>
+              {transactionHash}
+            </ReducedTextAndCopy>
           </Flex>
-          <Box fontSize={'sm'}>
-            <Flex gap={2} align={'center'}>
-              <Trans i18nKey='blocks.proposer'>Hash:</Trans>
-              <ReducedTextAndCopy color={'textAccent1'} toCopy={transactionHash}>
-                {transactionHash}
-              </ReducedTextAndCopy>
-            </Flex>
-          </Box>
         </Flex>
       </CardBody>
     </LinkCard>

src/components/Transactions/TxDetails/TxDetails.tsx

@@ -7,13 +7,15 @@ import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
 import { TransactionTypeBadge } from '~components/Transactions/TransactionCard'
 import { RoutePath } from '~constants'
 import { useBlockToDate } from '~queries/stats'
+import { useDateFns } from '~i18n/use-date-fns'
 
 export const TxDetailsGrid = (tx: Tx) => {
   const { data } = useBlockToDate({ height: tx.txInfo.blockHeight })
   const { t } = useTranslation()
+  const { format } = useDateFns()
   let timestamp = ''
   if (data) {
-    timestamp = new Date(data.date).toString()
+    timestamp = format(new Date(data.date), 'PPPpp')
   }
   const blockHeight = tx.txInfo.blockHeight
   const txIndex = tx.txInfo.transactionIndex

src/i18n/locales/en.json

@@ -166,7 +166,7 @@
     "transactions_list": "Transactions",
     "tx_count_one": "Total {{ count }} transaction",
     "tx_count_other": "Total {{ count }} transactions",
-    "tx_detail": "Transaction Details",
+    "tx_title": "Transaction #{{ number }}",
     "tx_hash": "Transaction hash",
     "tx_index": "Transaction index",
     "tx_type": "Transaction type",