tooltips and popover

data/tx.ts

@@ -8,9 +8,11 @@ export const tx = {
   timestamp: 1662623567695,
   address_from: {
     hash: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830',
+    type: 'Address',
   },
   address_to: {
     hash: '0x35317007D203b8a86CA727ad44E473E40450E378',
+    type: 'Contract',
   },
   amount: {
     value: 0.03,

data/txs.ts

@@ -9,6 +9,7 @@ export const txs = [
   {
     ...tx,
     status: 'failed',
+    errorText: 'Error: (Awaiting internal transactions for reason)',
     txType: 'contract-call',
     method: 'CommitHash CommitHash CommitHash CommitHash',
   },
@@ -20,6 +21,7 @@ export const txs = [
     address_from: {
       hash: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830',
       alias: 'tkdkdkdkdkdkdkdkdkdkdkdkdkdkd.eth',
+      type: 'ENS name',
     },
   },
 ];

ui/shared/Separator.tsx

+import { Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const Separator = () => {
+  const bgColor = useColorModeValue('gray.700', 'gray.200');
+  return (
+    <Box width="1px" background={ bgColor } height="20px" mx={ 3 }/>
+  );
+};
+
+export default Separator;

ui/shared/TxStatus.tsx

-import { Tag, TagLabel, TagLeftIcon } from '@chakra-ui/react';
+import { Tag, TagLabel, TagLeftIcon, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
 import errorIcon from 'icons/status/error.svg';
@@ -7,9 +7,10 @@ import successIcon from 'icons/status/success.svg';
 
 export interface Props {
   status: 'success' | 'failed' | 'pending';
+  errorText?: string;
 }
 
-const TxStatus = ({ status }: Props) => {
+const TxStatus = ({ status, errorText }: Props) => {
   let label;
   let icon;
   let colorScheme;
@@ -35,10 +36,12 @@ const TxStatus = ({ status }: Props) => {
   }
 
   return (
-    <Tag colorScheme={ colorScheme } display="inline-flex">
-      <TagLeftIcon boxSize={ 2.5 } as={ icon }/>
-      <TagLabel>{ label }</TagLabel>
-    </Tag>
+    <Tooltip label={ errorText }>
+      <Tag colorScheme={ colorScheme } display="inline-flex">
+        <TagLeftIcon boxSize={ 2.5 } as={ icon }/>
+        <TagLabel>{ label }</TagLabel>
+      </Tag>
+    </Tooltip>
   );
 };
 

ui/txs/TxAdditionalInfo.tsx

+import { Box, Heading, Text, Flex, Link, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import useLink from 'lib/link/useLink';
+import Separator from 'ui/shared/Separator';
+import Utilization from 'ui/shared/Utilization';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TxAdditionalInfo = ({ tx }: { tx: any }) => {
+
+  const sectionBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const sectionProps = {
+    borderBottom: '1px solid',
+    borderColor: sectionBorderColor,
+    paddingBottom: 4,
+  };
+
+  const sectionTitleProps = {
+    color: 'gray.500',
+    fontWeight: 600,
+    marginBottom: 3,
+  };
+
+  const link = useLink();
+
+  return (
+    <>
+      <Heading as="h4" fontSize="18px" mb={ 6 }>Additional info </Heading>
+      <Box { ...sectionProps } mb={ 4 }>
+        <Text { ...sectionTitleProps }>Transaction fee</Text>
+        <Flex>
+          <Text>{ tx.fee.value } Ether</Text>
+          <Text variant="secondary" ml={ 1 }>(${ tx.fee.value_usd.toFixed(2) })</Text>
+        </Flex>
+      </Box>
+      <Box { ...sectionProps } mb={ 4 }>
+        <Text { ...sectionTitleProps }>Gas limit & usage by transaction</Text>
+        <Flex>
+          <Text>{ tx.gas_used.toLocaleString('en') }</Text>
+          <Separator/>
+          <Text>{ tx.gas_limit.toLocaleString('en') }</Text>
+          <Utilization ml={ 4 } value={ tx.gas_used / tx.gas_limit }/>
+        </Flex>
+      </Box>
+      <Box { ...sectionProps } mb={ 4 }>
+        <Text { ...sectionTitleProps }>Gas fees (Gwei)</Text>
+        <Box>
+          <Text as="span" fontWeight="500">Base: </Text>
+          <Text fontWeight="600" as="span">{ tx.gas_fees.base }</Text>
+        </Box>
+        <Box>
+          <Text as="span" fontWeight="500">Max: </Text>
+          <Text fontWeight="600" as="span">{ tx.gas_fees.max }</Text>
+        </Box>
+        <Box>
+          <Text as="span" fontWeight="500">Max priority: </Text>
+          <Text fontWeight="600" as="span">{ tx.gas_fees.max_priority }</Text>
+        </Box>
+      </Box>
+      <Box { ...sectionProps } mb={ 4 }>
+        <Text { ...sectionTitleProps }>Others</Text>
+        <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>
+          <Text as="span" fontWeight="500">Nonce: </Text>
+          <Text fontWeight="600" as="span">{ tx.nonce }</Text>
+        </Box>
+        <Box>
+          <Text as="span" fontWeight="500">Position: </Text>
+          <Text fontWeight="600" as="span">{ tx.position }</Text>
+        </Box>
+      </Box>
+      <Link href={ link('tx_index', { id: tx.hash }) }>More details</Link>
+    </>
+  );
+};
+
+export default TxAdditionalInfo;

ui/txs/TxsTableItem.tsx

-import { Box, Tr, Td, Tag, Link, Icon, VStack, Text, useBreakpointValue } from '@chakra-ui/react';
+import {
+  Box,
+  Tr,
+  Td,
+  Tag,
+  Link,
+  Icon,
+  VStack,
+  Text,
+  Tooltip,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useBreakpointValue,
+  Center,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import rightArrowIcon from 'icons/arrows/right.svg';
@@ -10,6 +27,7 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 import TxStatus from 'ui/shared/TxStatus';
+import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
 import TxType from './TxType';
 
@@ -20,27 +38,55 @@ const TxsTableItem = (item) => {
 
   const addressFrom = (
     <Address>
-      <AddressIcon hash={ item.address_from.hash }/>
+      <Tooltip label={ item.address_from.type } shouldWrapChildren>
+        <AddressIcon hash={ item.address_from.hash }/>
+      </Tooltip>
       <AddressLink hash={ item.address_from.hash } alias={ item.address_from.alias } fontWeight="500" ml={ 2 }/>
     </Address>
   );
 
   const addressTo = (
     <Address>
-      <AddressIcon hash={ item.address_to.hash }/>
+      <Tooltip label={ item.address_to.type } shouldWrapChildren>
+        <AddressIcon hash={ item.address_to.hash }/>
+      </Tooltip>
       <AddressLink hash={ item.address_to.hash } alias={ item.address_to.alias } fontWeight="500" ml={ 2 }/>
     </Address>
   );
 
+  const infoBgColor = useColorModeValue('blue.50', 'gray.600');
+  const infoColor = useColorModeValue('blue.600', 'blue.300');
+
+  const infoBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
   return (
     <Tr>
       <Td pl={ 4 }>
-        <Icon as={ infoIcon } boxSize={ 5 } color="blue.600"/>
+        <Popover placement="right-start" openDelay={ 300 }>
+          { ({ isOpen }) => (
+            <>
+              <PopoverTrigger>
+                <Center background={ isOpen ? infoBgColor : 'unset' } borderRadius="8px" w="30px" h="30px">
+                  <Icon
+                    as={ infoIcon }
+                    boxSize={ 5 }
+                    color={ infoColor }
+                    _hover={{ color: 'blue.400' }}
+                  />
+                </Center>
+              </PopoverTrigger>
+              <PopoverContent border="1px solid" borderColor={ infoBorderColor }>
+                <PopoverBody>
+                  <TxAdditionalInfo tx={ item }/>
+                </PopoverBody>
+              </PopoverContent>
+            </>
+          ) }
+        </Popover>
       </Td>
       <Td>
         <VStack alignItems="start">
           <TxType type={ item.txType }/>
-          <TxStatus status={ item.status }/>
+          <TxStatus status={ item.status } errorText={ item.errorText }/>
         </VStack>
       </Td>
       <Td>