From 683568c1e566e8ddb5a3cbf19a4ad477222ad7ad Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Wed, 21 Aug 2024 05:54:23 -0500
Subject: [PATCH] Fix tx information (#102)

* Fix txs card

* Fix tx title

* Fix timestamps

* Fix grid layout

* Delete padding
---
 src/components/Blocks/Detail.tsx              |  5 ++--
 src/components/Layout/DetailsGrid.tsx         |  2 +-
 src/components/Layout/IconLink.tsx            |  8 +++---
 src/components/Transactions/Detail.tsx        |  4 ++-
 .../Transactions/TransactionCard.tsx          | 25 ++++++++-----------
 .../Transactions/TxDetails/TxDetails.tsx      |  4 ++-
 src/i18n/locales/en.json                      |  2 +-
 7 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/Blocks/Detail.tsx b/src/components/Blocks/Detail.tsx
index 4e5fac2c..61ab81bc 100644
--- a/src/components/Blocks/Detail.tsx
+++ b/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' }),
diff --git a/src/components/Layout/DetailsGrid.tsx b/src/components/Layout/DetailsGrid.tsx
index 975aff31..8a463ab3 100644
--- a/src/components/Layout/DetailsGrid.tsx
+++ b/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'}>
diff --git a/src/components/Layout/IconLink.tsx b/src/components/Layout/IconLink.tsx
index bf5608e7..89e474be 100644
--- a/src/components/Layout/IconLink.tsx
+++ b/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>
   )
diff --git a/src/components/Transactions/Detail.tsx b/src/components/Transactions/Detail.tsx
index f24880e9..72462e5b 100644
--- a/src/components/Transactions/Detail.tsx
+++ b/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'}>
diff --git a/src/components/Transactions/TransactionCard.tsx b/src/components/Transactions/TransactionCard.tsx
index 44de6d1b..5156d1d1 100644
--- a/src/components/Transactions/TransactionCard.tsx
+++ b/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>
diff --git a/src/components/Transactions/TxDetails/TxDetails.tsx b/src/components/Transactions/TxDetails/TxDetails.tsx
index 4c95ad49..1e9b3666 100644
--- a/src/components/Transactions/TxDetails/TxDetails.tsx
+++ b/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
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 3f8e9b7c..4ae6f377 100644
--- a/src/i18n/locales/en.json
+++ b/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",