addresses and other info

data/tx.ts

@@ -6,7 +6,7 @@ export const tx = {
   confirmation_duration: 30,
   timestamp: 1662623567695,
   address_from: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830',
-  address_to: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830',
+  address_to: '0x35317007D203b8a86CA727ad44E473E40450E378',
   amount: {
     value: 0.03,
     value_usd: 35.5,

icons/clock.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 11a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0ZM11 1C5.477 1 1 5.477 1 11s4.477 10 10 10 10-4.477 10-10S16.523 1 11 1Zm1.25 5a1.25 1.25 0 1 0-2.5 0v5c0 .69.56 1.25 1.25 1.25h5a1.25 1.25 0 1 0 0-2.5h-3.75V6Z" fill="#718096" stroke="#fff" stroke-width=".6" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 11a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0ZM11 1C5.477 1 1 5.477 1 11s4.477 10 10 10 10-4.477 10-10S16.523 1 11 1Zm1.25 5a1.25 1.25 0 1 0-2.5 0v5c0 .69.56 1.25 1.25 1.25h5a1.25 1.25 0 1 0 0-2.5h-3.75V6Z" fill="currentColor" stroke="transparent" stroke-width=".6" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

icons/flame.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.976 20a6.977 6.977 0 0 0 6.977-6.977c0-.805-.214-1.578-.465-2.297-1.55 1.532-2.729 2.297-3.535 2.297C16.669 6.512 14.627 3.721 9.046 0c.465 4.651-2.601 6.767-3.85 7.941A6.977 6.977 0 0 0 9.977 20Zm.66-16.526c3.016 2.559 3.03 4.546.701 8.627-.708 1.24.188 2.783 1.616 2.783.64 0 1.287-.186 1.971-.554a5.116 5.116 0 1 1-8.453-5.034c.117-.11.712-.637.738-.66.394-.354.719-.668 1.04-1.01 1.144-1.227 1.967-2.587 2.388-4.152Z" fill="currentColor"/>
+</svg>

ui/shared/AddressLinkWithTooltip.tsx

@@ -1,4 +1,5 @@
-import { HStack, Link } from '@chakra-ui/react';
+import { Flex, Link } from '@chakra-ui/react';
+import type { HTMLChakraProps } from '@chakra-ui/system';
 import React from 'react';
 
 import useBasePath from 'lib/hooks/useBasePath';
@@ -8,12 +9,13 @@ import CopyToClipboard from './CopyToClipboard';
 
 const FONT_WEIGHT = '600';
 
-type Props = {
+interface Props extends HTMLChakraProps<'div'> {
   address: string;
   type?: 'address' | 'transaction';
+  fontWeight?: string;
 }
 
-const AddressLinkWithTooltip = ({ address, type = 'address' }: Props) => {
+const AddressLinkWithTooltip = ({ address, type = 'address', ...styles }: Props) => {
   const basePath = useBasePath();
   let url;
   if (type === 'transaction') {
@@ -22,19 +24,19 @@ const AddressLinkWithTooltip = ({ address, type = 'address' }: Props) => {
     url = basePath + '/address/' + address + '/tokens#address-tabs';
   }
   return (
-    <HStack spacing={ 2 } alignContent="center" overflow="hidden" maxW="100%">
+    <Flex columnGap={ 2 } alignItems="center" overflow="hidden" maxW="100%" { ...styles }>
       <Link
         href={ url }
         target="_blank"
         overflow="hidden"
-        fontWeight={ FONT_WEIGHT }
+        fontWeight={ styles.fontWeight || FONT_WEIGHT }
         lineHeight="24px"
         whiteSpace="nowrap"
       >
-        <AddressWithDots address={ address } fontWeight={ FONT_WEIGHT }/>
+        <AddressWithDots address={ address } fontWeight={ styles.fontWeight || FONT_WEIGHT }/>
       </Link>
       <CopyToClipboard text={ address }/>
-    </HStack>
+    </Flex>
   );
 };
 

ui/shared/AddressWithDots.tsx

@@ -19,12 +19,12 @@ import { BODY_TYPEFACE } from 'theme/foundations/typography';
 const TAIL_LENGTH = 4;
 const HEAD_MIN_LENGTH = 4;
 
-const AddressWithDots = ({ address, fontWeight }: {address: string; fontWeight: FontFace['weight']}) => {
+const AddressWithDots = ({ address, fontWeight }: { address: string; fontWeight: string | number }) => {
   const addressRef = useRef<HTMLSpanElement>(null);
   const [ displayedAddress, setAddress ] = React.useState(address);
 
   const isFontFaceLoaded = useFontFaceObserver([
-    { family: BODY_TYPEFACE, weight: fontWeight },
+    { family: BODY_TYPEFACE, weight: String(fontWeight) as FontFace['weight'] },
   ]);
 
   const calculateString = useCallback(() => {

ui/shared/DetailsInfoItem.tsx

@@ -1,18 +1,19 @@
 import { GridItem, Icon, Flex, Tooltip, Box, Text } from '@chakra-ui/react';
+import type { HTMLChakraProps } from '@chakra-ui/system';
 import React from 'react';
 
 import infoIcon from 'icons/info.svg';
 
-interface Props {
+interface Props extends HTMLChakraProps<'div'> {
   title: string;
   hint: string;
   children: React.ReactNode;
 }
 
-const DetailsInfoItem = ({ title, hint, children }: Props) => {
+const DetailsInfoItem = ({ title, hint, children, ...styles }: Props) => {
   return (
     <>
-      <GridItem py={ 2 }>
+      <GridItem py={ 2 } { ...styles } whiteSpace="nowrap">
         <Flex columnGap={ 2 } alignItems="center">
           <Tooltip
             label={ hint }
@@ -23,10 +24,12 @@ const DetailsInfoItem = ({ title, hint, children }: Props) => {
               <Icon as={ infoIcon } boxSize={ 5 }/>
             </Box>
           </Tooltip>
-          <Text fontWeight={ 500 } whiteSpace="nowrap">{ title }</Text>
+          <Text fontWeight={ 500 }>{ title }</Text>
         </Flex>
       </GridItem>
-      <GridItem display="flex" alignItems="center" py={ 2 }>{ children }</GridItem>
+      <GridItem display="flex" alignItems="center" py={ 2 } whiteSpace="nowrap" { ...styles }>
+        { children }
+      </GridItem>
     </>
   );
 };

ui/tx/TxDetails.tsx

@@ -3,7 +3,10 @@ import React from 'react';
 
 import { tx } from 'data/tx';
 import clockIcon from 'icons/clock.svg';
+import flameIcon from 'icons/flame.svg';
 import dayjs from 'lib/date/dayjs';
+import AddressIcon from 'ui/shared/AddressIcon';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import type { Props as TxStatusProps } from 'ui/tx/TxStatus';
@@ -45,13 +48,58 @@ const TxDetails = () => {
         title="Timestamp"
         hint="Date & time of transaction inclusion, including length of time for confirmation."
       >
-        <Icon as={ clockIcon } boxSize={ 5 }/>
+        <Icon as={ clockIcon } boxSize={ 5 } color="gray.500"/>
         <Text ml={ 1 }>{ dayjs(tx.timestamp).fromNow() }</Text>
         <Text { ...leftSeparatorStyles }>{ dayjs(tx.timestamp).format('LLLL') }</Text>
         <Text { ...leftSeparatorStyles } borderLeftColor="gray.500" variant="secondary">
           Confirmed within { tx.confirmation_duration } secs
         </Text>
       </DetailsInfoItem>
+      <DetailsInfoItem
+        title="From"
+        hint="Address (external or contract) sending the transaction."
+        mt={ 8 }
+      >
+        <AddressIcon address={ tx.address_from }/>
+        <AddressLinkWithTooltip address={ tx.address_from } columnGap={ 0 } ml={ 2 } fontWeight="400"/>
+      </DetailsInfoItem>
+      <DetailsInfoItem
+        title="To"
+        hint="Address (external or contract) sending the transaction."
+      >
+        <AddressIcon address={ tx.address_to }/>
+        <AddressLinkWithTooltip address={ tx.address_to } columnGap={ 0 } ml={ 2 } fontWeight="400"/>
+      </DetailsInfoItem>
+      <DetailsInfoItem
+        title="Value"
+        hint="Value sent in the native token (and USD) if applicable."
+        mt={ 8 }
+      >
+        <Text>{ tx.amount.value } Ether</Text>
+        <Text variant="secondary" ml={ 1 }>(${ tx.amount.value_usd.toFixed(2) })</Text>
+      </DetailsInfoItem>
+      <DetailsInfoItem
+        title="Transaction fee"
+        hint="Total transaction fee."
+      >
+        <Text>{ tx.fee.value } Ether</Text>
+        <Text variant="secondary" ml={ 1 }>(${ tx.fee.value_usd.toFixed(2) })</Text>
+      </DetailsInfoItem>
+      <DetailsInfoItem
+        title="Gas price"
+        hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage."
+      >
+        <Text>{ tx.gas_price.toLocaleString('en', { minimumFractionDigits: 18 }) } Ether</Text>
+        <Text variant="secondary" ml={ 1 }>({ (tx.gas_price * Math.pow(10, 18)).toFixed(0) } Gwei)</Text>
+      </DetailsInfoItem>
+      <DetailsInfoItem
+        title="Burnt fees"
+        hint="Amount of ETH burned for this transaction. Equals Block Base Fee per Gas * Gas Used."
+      >
+        <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
+        <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>
     </Grid>
   );
 };