cut and other info

data/tx.ts

@@ -27,4 +27,10 @@ export const tx = {
     value: 0.002156925953623692,
     value_usd: 2.55,
   },
+  type: {
+    value: '2',
+    eip: 'EIP-1559',
+  },
+  nonce: 4,
+  position: 342,
 };

theme/components/Link.ts

@@ -11,6 +11,7 @@ const variantPrimary = defineStyle((props) => {
     color: mode('blue.600', 'blue.300')(props),
     _hover: {
       color: mode('blue.400', 'blue.200')(props),
+      textDecorationStyle: props.textDecorationStyle || 'solid',
     },
   };
 });

ui/shared/DetailsInfoItem.tsx

@@ -13,7 +13,7 @@ interface Props extends HTMLChakraProps<'div'> {
 const DetailsInfoItem = ({ title, hint, children, ...styles }: Props) => {
   return (
     <>
-      <GridItem py={ 2 } { ...styles } whiteSpace="nowrap">
+      <GridItem py={ 2 } lineHeight={ 5 } { ...styles } whiteSpace="nowrap">
         <Flex columnGap={ 2 } alignItems="center">
           <Tooltip
             label={ hint }
@@ -27,7 +27,7 @@ const DetailsInfoItem = ({ title, hint, children, ...styles }: Props) => {
           <Text fontWeight={ 500 }>{ title }</Text>
         </Flex>
       </GridItem>
-      <GridItem display="flex" alignItems="center" py={ 2 } whiteSpace="nowrap" { ...styles }>
+      <GridItem display="flex" alignItems="center" py={ 2 } lineHeight={ 5 } whiteSpace="nowrap" { ...styles }>
         { children }
       </GridItem>
     </>

ui/tx/TxDetails.tsx

-import { Grid, Text, Box, Icon } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Box, Icon, Link } from '@chakra-ui/react';
 import React from 'react';
 
 import { tx } from 'data/tx';
@@ -14,6 +14,8 @@ import type { Props as TxStatusProps } from 'ui/tx/TxStatus';
 import TxStatus from 'ui/tx/TxStatus';
 
 const TxDetails = () => {
+  const [ isExpanded, setIsExpanded ] = React.useState(false);
+
   const leftSeparatorStyles = {
     ml: 3,
     pl: 3,
@@ -21,6 +23,10 @@ const TxDetails = () => {
     borderLeftColor: 'gray.700',
   };
 
+  const handleCutClick = React.useCallback(() => {
+    setIsExpanded((flag) => !flag);
+  }, []);
+
   return (
     <Grid columnGap={ 8 } rowGap={ 3 } templateColumns="auto 1fr">
       <DetailsInfoItem
@@ -107,15 +113,15 @@ const TxDetails = () => {
         hint="Base Fee refers to the network Base Fee at the time of the block, while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay for their tx & to give to the miner respectively."
       >
         <Box>
-          <Text as="span">Base: </Text>
+          <Text as="span" fontWeight="500">Base: </Text>
           <Text fontWeight="600" as="span">{ tx.gas_fees.base }</Text>
         </Box>
         <Box { ...leftSeparatorStyles }>
-          <Text as="span">Max: </Text>
+          <Text as="span" fontWeight="500">Max: </Text>
           <Text fontWeight="600" as="span">{ tx.gas_fees.max }</Text>
         </Box>
         <Box { ...leftSeparatorStyles }>
-          <Text as="span">Max priority: </Text>
+          <Text as="span" fontWeight="500">Max priority: </Text>
           <Text fontWeight="600" as="span">{ tx.gas_fees.max_priority }</Text>
         </Box>
       </DetailsInfoItem>
@@ -127,6 +133,59 @@ const TxDetails = () => {
         <Text ml={ 1 }>{ tx.burnt_fees.value.toLocaleString('en', { minimumFractionDigits: 18 }) } Ether</Text>
         <Text variant="secondary" ml={ 1 }>(${ tx.burnt_fees.value_usd.toFixed(2) })</Text>
       </DetailsInfoItem>
+      <GridItem colSpan={ 2 }>
+        <Link
+          mt={ 6 }
+          display="inline-block"
+          fontSize="sm"
+          textDecorationLine="underline"
+          textDecorationStyle="dashed"
+          onClick={ handleCutClick }
+        >
+          { isExpanded ? 'Hide details' : 'View details' }
+        </Link>
+      </GridItem>
+      { isExpanded && (
+        <>
+          <DetailsInfoItem
+            mt={ 4 }
+            title="Other"
+            hint="Other data related to this transaction."
+          >
+            <Box>
+              <Text as="span" fontWeight="500">Txn type: </Text>
+              <Text fontWeight="600" as="span">{ tx.type.value }</Text>
+              <Text fontWeight="400" as="span" ml={ 1 }>({ tx.type.eip })</Text>
+            </Box>
+            <Box { ...leftSeparatorStyles }>
+              <Text as="span" fontWeight="500">Nonce: </Text>
+              <Text fontWeight="600" as="span">{ tx.nonce }</Text>
+            </Box>
+            <Box { ...leftSeparatorStyles }>
+              <Text as="span" fontWeight="500">Position: </Text>
+              <Text fontWeight="600" as="span">{ tx.position }</Text>
+            </Box>
+          </DetailsInfoItem>
+          <DetailsInfoItem
+            title="Other"
+            hint="Other data related to this transaction."
+          >
+            <Box>
+              <Text as="span" fontWeight="500">Txn type: </Text>
+              <Text fontWeight="600" as="span">{ tx.type.value }</Text>
+              <Text fontWeight="400" as="span" ml={ 1 }>({ tx.type.eip })</Text>
+            </Box>
+            <Box { ...leftSeparatorStyles }>
+              <Text as="span" fontWeight="500">Nonce: </Text>
+              <Text fontWeight="600" as="span">{ tx.nonce }</Text>
+            </Box>
+            <Box { ...leftSeparatorStyles }>
+              <Text as="span" fontWeight="500">Position: </Text>
+              <Text fontWeight="600" as="span">{ tx.position }</Text>
+            </Box>
+          </DetailsInfoItem>
+        </>
+      ) }
     </Grid>
   );
 };