Merge pull request #531 from blockscout/token-transfer-tx-info

token transfer tx info

icons/files/csv.svg

 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.4 2.933a.156.156 0 0 0-.155.156v10.844a.467.467 0 0 1-.934 0V3.09A1.089 1.089 0 0 1 6.401 2h7.474a.467.467 0 0 1 .322.137l4.355 4.355a.467.467 0 0 1 .137.33v7.111a.467.467 0 0 1-.933 0V7.29h-3.89a.467.467 0 0 1-.466-.467V2.933h-7Zm7.933.66v2.763h2.763l-2.763-2.763Zm-3.11 14.385c0-.186.064-.305.157-.385.1-.086.275-.16.542-.16.32.001.631.105.888.297a.467.467 0 0 0 .558-.749 2.427 2.427 0 0 0-1.444-.481h-.002c-.433 0-.841.12-1.15.384-.315.27-.483.657-.483 1.094 0 .235.065.447.189.628.12.175.28.297.436.386.28.16.633.253.915.327l.051.014c.327.087.568.157.733.257.13.08.165.145.165.254 0 .24-.084.34-.184.404-.134.086-.36.14-.671.14-.32 0-.632-.104-.888-.296a.467.467 0 0 0-.558.749c.417.31.923.48 1.444.481h.001c.388 0 .823-.062 1.175-.287.386-.247.614-.654.614-1.19 0-.513-.277-.847-.613-1.052-.298-.181-.674-.281-.967-.36l-.011-.002c-.333-.089-.576-.154-.745-.25a.377.377 0 0 1-.128-.103c-.012-.018-.025-.044-.025-.1Zm4.02-1.364c.238-.1.51.013.61.25l1.125 2.7 1.124-2.7a.467.467 0 1 1 .862.36l-1.556 3.733a.467.467 0 0 1-.861 0l-1.556-3.733a.466.466 0 0 1 .252-.61Zm-8.067.897c-.653.001-1.243.585-1.243 1.4s.59 1.399 1.243 1.4c.287-.003.564-.112.776-.306a.467.467 0 1 1 .63.69 2.1 2.1 0 0 1-1.4.55h-.004C5.934 21.244 5 20.163 5 18.91c0-1.253.934-2.333 2.178-2.333h.004a2.1 2.1 0 0 1 1.4.55.467.467 0 1 1-.63.689 1.167 1.167 0 0 0-.776-.306Z" fill="currentColor" stroke="currentColor" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.4 2.933a.156.156 0 0 0-.155.156v10.844a.467.467 0 0 1-.934 0V3.09A1.089 1.089 0 0 1 6.401 2h7.474a.467.467 0 0 1 .322.137l4.355 4.355a.467.467 0 0 1 .137.33v7.111a.467.467 0 0 1-.933 0V7.29h-3.89a.467.467 0 0 1-.466-.467v-3.89h-7Zm7.933.66v2.763h2.763l-2.763-2.763Zm-3.11 14.385c0-.186.064-.305.157-.385.1-.086.275-.16.542-.16.32.001.631.105.888.297a.467.467 0 0 0 .558-.749 2.427 2.427 0 0 0-1.444-.481h-.002c-.433 0-.841.12-1.15.384-.315.27-.483.657-.483 1.094 0 .235.065.447.189.628.12.175.28.297.436.386.28.16.633.253.915.327l.051.014c.327.087.568.157.733.257.13.08.165.145.165.254 0 .24-.084.34-.184.404-.134.086-.36.14-.671.14-.32 0-.632-.104-.888-.296a.467.467 0 0 0-.558.749c.417.31.923.48 1.444.481h.001c.388 0 .823-.062 1.175-.287.386-.247.614-.654.614-1.19 0-.513-.277-.847-.613-1.052-.298-.181-.674-.281-.967-.36l-.011-.002c-.333-.089-.576-.154-.745-.25a.377.377 0 0 1-.128-.103c-.012-.018-.025-.044-.025-.1Zm4.02-1.364c.238-.1.51.013.61.25l1.125 2.7 1.124-2.7a.467.467 0 1 1 .862.36l-1.556 3.733a.467.467 0 0 1-.861 0l-1.556-3.733a.466.466 0 0 1 .252-.61Zm-8.067.897c-.653.001-1.243.585-1.243 1.4s.59 1.399 1.243 1.4c.287-.003.564-.112.776-.306a.467.467 0 1 1 .63.69 2.1 2.1 0 0 1-1.4.55h-.004C5.934 21.244 5 20.163 5 18.91s.934-2.333 2.178-2.333h.004a2.1 2.1 0 0 1 1.4.55.467.467 0 1 1-.63.689 1.167 1.167 0 0 0-.776-.306Z" fill="currentColor" stroke="currentColor" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

icons/files/json.svg

 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.4 2.933a.156.156 0 0 0-.156.156v10.844a.467.467 0 0 1-.933 0V3.09A1.089 1.089 0 0 1 6.4 2h7.476a.467.467 0 0 1 .32.137l4.356 4.355a.467.467 0 0 1 .137.33v7.111a.467.467 0 0 1-.934 0V7.29h-3.889a.467.467 0 0 1-.466-.467V2.933h-7Zm7.933.66v2.763h2.762l-2.762-2.763Z" fill="currentColor" stroke="currentColor" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.752 20.137c-.016-.04-.03-.08-.043-.12-.068-.223.123-.42.356-.42h.074c.16 0 .29.123.369.263.045.08.103.147.17.2a.787.787 0 0 0 .256.136.99.99 0 0 0 .326.05.944.944 0 0 0 .421-.085.591.591 0 0 0 .26-.232.69.69 0 0 0 .086-.348.538.538 0 0 0-.036-.22.46.46 0 0 0-.119-.173c-.103-.096-.261-.173-.473-.232l-.63-.172a1.612 1.612 0 0 1-.55-.257 1.142 1.142 0 0 1-.36-.442 1.475 1.475 0 0 1-.125-.63c0-.293.065-.55.194-.768.13-.218.31-.388.538-.508.23-.12.495-.179.794-.179.31 0 .575.06.795.183.221.122.392.287.51.493.051.085.092.174.124.267.075.217-.117.414-.346.414-.194 0-.35-.152-.462-.31a.655.655 0 0 0-.25-.218.817.817 0 0 0-.379-.082c-.22 0-.395.06-.522.183a.559.559 0 0 0-.141.204.654.654 0 0 0-.048.258c0 .145.049.264.147.36a.922.922 0 0 0 .412.21l.634.173c.222.06.415.144.578.254.157.101.29.25.383.43.091.178.137.403.137.674 0 .297-.064.56-.191.789a1.308 1.308 0 0 1-.55.528c-.24.126-.531.19-.876.19-.26 0-.486-.036-.68-.109a1.375 1.375 0 0 1-.487-.303 1.355 1.355 0 0 1-.296-.45Zm-3.168-.04a1.803 1.803 0 0 1-.045-.17c-.044-.212.136-.39.354-.39h.05c.187 0 .332.157.412.325a.56.56 0 0 0 .197.224.448.448 0 0 0 .267.072c.194 0 .337-.066.43-.198.093-.132.14-.318.14-.56v-2.898a.404.404 0 0 1 .808 0v2.874c0 .53-.122.93-.365 1.209-.242.276-.576.415-1.005.415a1.402 1.402 0 0 1-.58-.113 1.17 1.17 0 0 1-.415-.32 1.428 1.428 0 0 1-.248-.47Zm9.279-1.906v.628c0 .308-.04.565-.12.771-.067.19-.182.352-.328.466a.795.795 0 0 1-.48.151.8.8 0 0 1-.48-.151 1.027 1.027 0 0 1-.326-.466 2.159 2.159 0 0 1-.12-.77v-.629c0-.31.04-.566.12-.77.067-.19.181-.352.326-.466a.787.787 0 0 1 .48-.155c.18 0 .34.052.48.155.146.113.26.275.329.465.08.205.119.461.119.771Zm.82.625v-.617c0-.454-.07-.844-.21-1.17a1.674 1.674 0 0 0-.602-.758c-.258-.176-.57-.265-.935-.265-.363 0-.676.089-.939.265-.26.173-.47.437-.601.755-.14.326-.21.717-.21 1.173v.617c0 .45.07.84.21 1.17.14.326.34.577.601.753.263.174.576.26.94.26s.676-.086.935-.26c.261-.176.462-.427.601-.753.14-.33.21-.72.21-1.17ZM16 17.69V20.528a.38.38 0 0 1-.762 0v-4.003a.426.426 0 0 1 .797-.208l1.66 2.97a.02.02 0 0 0 .04-.01v-2.796a.383.383 0 1 1 .765 0v4.006a.422.422 0 0 1-.79.206l-1.661-2.974a.056.056 0 0 0-.049-.028Z" fill="currentColor" stroke="currentColor" stroke-width=".3"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.4 2.933a.156.156 0 0 0-.156.156v10.844a.467.467 0 0 1-.933 0V3.09A1.089 1.089 0 0 1 6.4 2h7.476a.467.467 0 0 1 .32.137l4.356 4.355a.467.467 0 0 1 .137.33v7.111a.467.467 0 0 1-.934 0V7.29h-3.889a.467.467 0 0 1-.466-.467v-3.89h-7Zm7.933.66v2.763h2.762l-2.762-2.763Z" fill="currentColor" stroke="currentColor" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.752 20.137c-.016-.04-.03-.08-.043-.12-.068-.223.123-.42.356-.42h.074c.16 0 .29.123.369.263.045.08.103.147.17.2a.787.787 0 0 0 .256.136.99.99 0 0 0 .326.05.944.944 0 0 0 .421-.085.591.591 0 0 0 .26-.232.69.69 0 0 0 .086-.348.538.538 0 0 0-.036-.22.46.46 0 0 0-.119-.173c-.103-.096-.261-.173-.473-.232l-.63-.172a1.612 1.612 0 0 1-.55-.257 1.142 1.142 0 0 1-.36-.442 1.475 1.475 0 0 1-.125-.63c0-.293.065-.55.194-.768.13-.218.31-.388.538-.508.23-.12.495-.179.794-.179.31 0 .575.06.795.183.221.122.392.287.51.493.051.085.092.174.124.267.075.217-.117.414-.346.414-.194 0-.35-.152-.462-.31a.655.655 0 0 0-.25-.218.817.817 0 0 0-.379-.082c-.22 0-.395.06-.522.183a.559.559 0 0 0-.141.204.654.654 0 0 0-.048.258c0 .145.049.264.147.36a.922.922 0 0 0 .412.21l.634.173c.222.06.415.144.578.254.157.101.29.25.383.43.091.178.137.403.137.674a1.6 1.6 0 0 1-.191.789 1.308 1.308 0 0 1-.55.528c-.24.126-.531.19-.876.19-.26 0-.486-.036-.68-.109a1.375 1.375 0 0 1-.487-.303 1.355 1.355 0 0 1-.296-.45Zm-3.168-.04a1.803 1.803 0 0 1-.045-.17c-.044-.212.136-.39.354-.39h.05c.187 0 .332.157.412.325a.56.56 0 0 0 .197.224.448.448 0 0 0 .267.072c.194 0 .337-.066.43-.198.093-.132.14-.318.14-.56v-2.898a.404.404 0 0 1 .808 0v2.874c0 .53-.122.93-.365 1.209-.242.276-.576.415-1.005.415a1.402 1.402 0 0 1-.58-.113 1.17 1.17 0 0 1-.415-.32 1.428 1.428 0 0 1-.248-.47Zm9.279-1.906v.628c0 .308-.04.565-.12.771-.067.19-.182.352-.328.466a.795.795 0 0 1-.48.151.8.8 0 0 1-.48-.151 1.027 1.027 0 0 1-.326-.466 2.159 2.159 0 0 1-.12-.77v-.629c0-.31.04-.566.12-.77.067-.19.181-.352.326-.466a.787.787 0 0 1 .48-.155c.18 0 .34.052.48.155.146.113.26.275.329.465.08.205.119.461.119.771Zm.82.625v-.617c0-.454-.07-.844-.21-1.17a1.674 1.674 0 0 0-.602-.758c-.258-.176-.57-.265-.935-.265a1.65 1.65 0 0 0-.939.265c-.26.173-.47.437-.601.755-.14.326-.21.717-.21 1.173v.617c0 .45.07.84.21 1.17.14.326.34.577.601.753.263.174.576.26.94.26s.676-.086.935-.26c.261-.176.462-.427.601-.753.14-.33.21-.72.21-1.17ZM16 17.69v2.838a.38.38 0 0 1-.762 0v-4.003a.426.426 0 0 1 .797-.208l1.66 2.97a.02.02 0 0 0 .04-.01v-2.796a.383.383 0 1 1 .765 0v4.006a.422.422 0 0 1-.79.206l-1.661-2.974a.056.056 0 0 0-.049-.028Z" fill="currentColor" stroke="currentColor" stroke-width=".3"/>
 </svg>

ui/home/LatestTxsItem.tsx

@@ -3,15 +3,7 @@ import {
   Flex,
   HStack,
   Icon,
-  Modal,
-  ModalContent,
-  ModalCloseButton,
   Text,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  useDisclosure,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -23,7 +15,6 @@ import transactionIcon from 'icons/transactions.svg';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -40,7 +31,6 @@ const LatestBlocksItem = ({ tx }: Props) => {
   const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
 
   const isMobile = useIsMobile();
-  const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <Box
@@ -52,29 +42,14 @@ const LatestBlocksItem = ({ tx }: Props) => {
       _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
     >
       <Flex justifyContent="space-between" width="100%" alignItems="start" flexDirection={{ base: 'column', lg: 'row' }}>
-        { !isMobile && (
-          <Popover placement="right-start" openDelay={ 300 } isLazy>
-            { ({ isOpen }) => (
-              <>
-                <PopoverTrigger>
-                  <AdditionalInfoButton isOpen={ isOpen } mr={ 3 }/>
-                </PopoverTrigger>
-                <PopoverContent border="1px solid" borderColor="divider">
-                  <PopoverBody>
-                    <TxAdditionalInfo tx={ tx }/>
-                  </PopoverBody>
-                </PopoverContent>
-              </>
-            ) }
-          </Popover>
-        ) }
+        { !isMobile && <Flex mr={ 3 }><TxAdditionalInfo tx={ tx }/></Flex> }
         <Box width={{ base: '100%', lg: 'calc(50% - 32px)' }}>
           <Flex justifyContent="space-between">
             <HStack>
               <TxType types={ tx.tx_types }/>
               <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
             </HStack>
-            { isMobile && <AdditionalInfoButton onClick={ onOpen }/> }
+            { isMobile && <TxAdditionalInfo tx={ tx } isMobile/> }
           </Flex>
           <Flex
             mt={ 2 }
@@ -147,12 +122,6 @@ const LatestBlocksItem = ({ tx }: Props) => {
           </Flex>
         </Box>
       </Flex>
-      <Modal isOpen={ isOpen } onClose={ onClose } size="full">
-        <ModalContent paddingTop={ 4 }>
-          <ModalCloseButton/>
-          <TxAdditionalInfo tx={ tx }/>
-        </ModalContent>
-      </Modal>
     </Box>
   );
 };

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -7,7 +7,6 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 import eastArrowIcon from 'icons/arrows/east.svg';
 import transactionIcon from 'icons/transactions.svg';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -16,6 +15,7 @@ import ListItemMobile from 'ui/shared/ListItemMobile';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
+import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
 type Props = TokenTransfer & {
   baseAddress?: string;
@@ -52,10 +52,14 @@ const TokenTransferListItem = ({
         <TokenSnippet hash={ token.address } w="auto" maxW="calc(100% - 140px)" name={ token.name || 'Unnamed token' }/>
         <Tag flexShrink={ 0 } ml={ 2 } mr={ 2 }>{ token.type }</Tag>
         <Tag colorScheme="orange">{ getTokenTransferTypeText(type) }</Tag>
-        { showTxInfo && <AdditionalInfoButton position="absolute" top={ 0 } right={ 0 }/> }
+        { showTxInfo && txHash && (
+          <Flex position="absolute" top={ 0 } right={ 0 }>
+            <TxAdditionalInfo hash={ txHash } isMobile/>
+          </Flex>
+        ) }
       </Flex>
       { 'token_id' in total && <TokenTransferNft hash={ token.address } id={ total.token_id }/> }
-      { showTxInfo && (
+      { showTxInfo && txHash && (
         <Flex justifyContent="space-between" alignItems="center" lineHeight="24px" width="100%">
           <Flex>
             <Icon

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -13,6 +12,7 @@ import InOutTag from 'ui/shared/InOutTag';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
+import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
 type Props = TokenTransfer & {
   baseAddress?: string;
@@ -44,9 +44,9 @@ const TokenTransferTableItem = ({
 
   return (
     <Tr alignItems="top">
-      { showTxInfo && (
+      { showTxInfo && txHash && (
         <Td>
-          <AdditionalInfoButton/>
+          <TxAdditionalInfo hash={ txHash }/>
         </Td>
       ) }
       <Td>
@@ -59,7 +59,7 @@ const TokenTransferTableItem = ({
       <Td lineHeight="30px">
         { 'token_id' in total ? <TokenTransferNft hash={ token.address } id={ total.token_id }/> : '-' }
       </Td>
-      { showTxInfo && (
+      { showTxInfo && txHash && (
         <Td>
           <Address display="inline-flex" maxW="100%" fontWeight={ 600 } lineHeight="30px">
             <AddressLink type="transaction" hash={ txHash }/>

ui/txs/TxAdditionalInfo.tsx

-import { Box, Heading, Text, Flex, Link } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
+import {
+  Modal,
+  ModalContent,
+  ModalCloseButton,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useDisclosure,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
 
-import appConfig from 'configs/app/config';
-import getValueWithUnit from 'lib/getValueWithUnit';
-import link from 'lib/link/link';
-import CurrencyValue from 'ui/shared/CurrencyValue';
-import TextSeparator from 'ui/shared/TextSeparator';
-import Utilization from 'ui/shared/Utilization/Utilization';
+import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 
-const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
-  const sectionProps = {
-    borderBottom: '1px solid',
-    borderColor: 'divider',
-    paddingBottom: 4,
-  };
+import TxAdditionalInfoContainer from './TxAdditionalInfoContainer';
+import TxAdditionalInfoContent from './TxAdditionalInfoContent';
 
-  const sectionTitleProps = {
-    color: 'gray.500',
-    fontWeight: 600,
-    marginBottom: 3,
-    fontSize: 'sm',
-  };
+type Props =
+  ({
+    hash: string;
+    tx?: undefined;
+  } |
+  {
+    hash?: undefined;
+    tx: Transaction;
+  }) & {
+    isMobile?: boolean;
+  }
 
+const TxAdditionalInfo = ({ hash, tx, isMobile }: Props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const content = hash !== undefined ? <TxAdditionalInfoContainer hash={ hash }/> : <TxAdditionalInfoContent tx={ tx }/>;
+
+  if (isMobile) {
+    return (
+      <>
+        <AdditionalInfoButton onClick={ onOpen }/>
+        <Modal isOpen={ isOpen } onClose={ onClose } size="full">
+          <ModalContent paddingTop={ 4 }>
+            <ModalCloseButton/>
+            { content }
+          </ModalContent>
+        </Modal>
+      </>
+    );
+  }
   return (
-    <>
-      <Heading as="h4" size="sm" mb={ 6 }>Additional info </Heading>
-      <Box { ...sectionProps } mb={ 4 }>
-        <Text { ...sectionTitleProps }>Transaction fee</Text>
-        <Flex>
-          <CurrencyValue
-            value={ tx.fee.value }
-            currency={ appConfig.network.currency.symbol }
-            exchangeRate={ tx.exchange_rate }
-            accuracyUsd={ 2 }
-          />
-        </Flex>
-      </Box>
-      { tx.gas_used !== null && (
-        <Box { ...sectionProps } mb={ 4 }>
-          <Text { ...sectionTitleProps }>Gas limit & usage by transaction</Text>
-          <Flex>
-            <Text>{ BigNumber(tx.gas_used).toFormat() }</Text>
-            <TextSeparator/>
-            <Text>{ BigNumber(tx.gas_limit).toFormat() }</Text>
-            <Utilization ml={ 4 } value={ Number(BigNumber(tx.gas_used).dividedBy(BigNumber(tx.gas_limit)).toFixed(2)) }/>
-          </Flex>
-        </Box>
-      ) }
-      { (tx.base_fee_per_gas !== null || tx.max_fee_per_gas !== null || tx.max_priority_fee_per_gas !== null) && (
-        <Box { ...sectionProps } mb={ 4 }>
-          <Text { ...sectionTitleProps }>Gas fees (Gwei)</Text>
-          { tx.base_fee_per_gas !== null && (
-            <Box>
-              <Text as="span" fontWeight="500">Base: </Text>
-              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.base_fee_per_gas, 'gwei').toFormat() }</Text>
-            </Box>
-          ) }
-          { tx.max_fee_per_gas !== null && (
-            <Box>
-              <Text as="span" fontWeight="500">Max: </Text>
-              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_fee_per_gas, 'gwei').toFormat() }</Text>
-            </Box>
-          ) }
-          { tx.max_priority_fee_per_gas !== null && (
-            <Box>
-              <Text as="span" fontWeight="500">Max priority: </Text>
-              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_priority_fee_per_gas, 'gwei').toFormat() }</Text>
-            </Box>
-          ) }
-        </Box>
+    <Popover placement="right-start" openDelay={ 300 } isLazy>
+      { ({ isOpen }) => (
+        <>
+          <PopoverTrigger>
+            <AdditionalInfoButton isOpen={ isOpen }/>
+          </PopoverTrigger>
+          <PopoverContent border="1px solid" borderColor="divider">
+            <PopoverBody>
+              { content }
+            </PopoverBody>
+          </PopoverContent>
+        </>
       ) }
-      <Box { ...sectionProps } mb={ 4 }>
-        <Text { ...sectionTitleProps }>Others</Text>
-        <Box>
-          <Text as="span" fontWeight="500">Txn type: </Text>
-          <Text fontWeight="600" as="span">{ tx.type }</Text>
-          { tx.type === 2 && <Text fontWeight="400" as="span" ml={ 1 } color="gray.500">(EIP-1559)</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 fontSize="sm" href={ link('tx', { id: tx.hash }) }>More details</Link>
-    </>
+    </Popover>
   );
 };
 
-export default TxAdditionalInfo;
+export default React.memo(TxAdditionalInfo);

ui/txs/TxAdditionalInfoContainer.tsx

+import { Box, Divider, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+import TxAdditionalInfoContent from './TxAdditionalInfoContent';
+
+interface Props {
+  hash: string;
+}
+
+const TxAdditionalInfoContainer = ({ hash }: Props) => {
+  const { data, isError, isLoading } = useApiQuery('tx', {
+    pathParams: { id: hash },
+    queryOptions: {
+      refetchOnMount: false,
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <Box>
+        <Skeleton w="130px" h="24px" borderRadius="full" mb={ 6 }/>
+        <Box>
+          <Skeleton w="110px" h="16px" borderRadius="full" mb={ 3 }/>
+          <Skeleton w="100%" h="16px" borderRadius="full"/>
+        </Box>
+        <Divider my={ 4 }/>
+        <Box>
+          <Skeleton w="110px" h="16px" borderRadius="full" mb={ 3 }/>
+          <Skeleton w="100%" h="16px" borderRadius="full"/>
+        </Box>
+        <Divider my={ 4 }/>
+        <Box>
+          <Skeleton w="110px" h="16px" borderRadius="full" mb={ 3 }/>
+          <Skeleton w="100%" h="16px" borderRadius="full"/>
+        </Box>
+        <Divider my={ 4 }/>
+        <Box>
+          <Skeleton w="110px" h="16px" borderRadius="full" mb={ 3 }/>
+          <Skeleton w="75%" h="16px" borderRadius="full"/>
+          <Skeleton w="75%" h="16px" borderRadius="full" mt={ 1 }/>
+          <Skeleton w="75%" h="16px" borderRadius="full" mt={ 1 }/>
+        </Box>
+        <Divider my={ 4 }/>
+        <Skeleton w="80px" h="16px" borderRadius="full"/>
+      </Box>
+    );
+  }
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  return <TxAdditionalInfoContent tx={ data }/>;
+};
+
+export default React.memo(TxAdditionalInfoContainer);

ui/txs/TxAdditionalInfoContent.tsx

+import { Box, Heading, Text, Flex, Link } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { Transaction } from 'types/api/transaction';
+
+import appConfig from 'configs/app/config';
+import getValueWithUnit from 'lib/getValueWithUnit';
+import link from 'lib/link/link';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import TextSeparator from 'ui/shared/TextSeparator';
+import Utilization from 'ui/shared/Utilization/Utilization';
+
+const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
+  const sectionProps = {
+    borderBottom: '1px solid',
+    borderColor: 'divider',
+    paddingBottom: 4,
+  };
+
+  const sectionTitleProps = {
+    color: 'gray.500',
+    fontWeight: 600,
+    marginBottom: 3,
+    fontSize: 'sm',
+  };
+
+  return (
+    <>
+      <Heading as="h4" size="sm" mb={ 6 }>Additional info </Heading>
+      <Box { ...sectionProps } mb={ 4 }>
+        <Text { ...sectionTitleProps }>Transaction fee</Text>
+        <Flex>
+          <CurrencyValue
+            value={ tx.fee.value }
+            currency={ appConfig.network.currency.symbol }
+            exchangeRate={ tx.exchange_rate }
+            accuracyUsd={ 2 }
+          />
+        </Flex>
+      </Box>
+      { tx.gas_used !== null && (
+        <Box { ...sectionProps } mb={ 4 }>
+          <Text { ...sectionTitleProps }>Gas limit & usage by transaction</Text>
+          <Flex>
+            <Text>{ BigNumber(tx.gas_used).toFormat() }</Text>
+            <TextSeparator/>
+            <Text>{ BigNumber(tx.gas_limit).toFormat() }</Text>
+            <Utilization ml={ 4 } value={ Number(BigNumber(tx.gas_used).dividedBy(BigNumber(tx.gas_limit)).toFixed(2)) }/>
+          </Flex>
+        </Box>
+      ) }
+      { (tx.base_fee_per_gas !== null || tx.max_fee_per_gas !== null || tx.max_priority_fee_per_gas !== null) && (
+        <Box { ...sectionProps } mb={ 4 }>
+          <Text { ...sectionTitleProps }>Gas fees (Gwei)</Text>
+          { tx.base_fee_per_gas !== null && (
+            <Box>
+              <Text as="span" fontWeight="500">Base: </Text>
+              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.base_fee_per_gas, 'gwei').toFormat() }</Text>
+            </Box>
+          ) }
+          { tx.max_fee_per_gas !== null && (
+            <Box mt={ 1 }>
+              <Text as="span" fontWeight="500">Max: </Text>
+              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_fee_per_gas, 'gwei').toFormat() }</Text>
+            </Box>
+          ) }
+          { tx.max_priority_fee_per_gas !== null && (
+            <Box mt={ 1 }>
+              <Text as="span" fontWeight="500">Max priority: </Text>
+              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_priority_fee_per_gas, 'gwei').toFormat() }</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 }</Text>
+          { tx.type === 2 && <Text fontWeight="400" as="span" ml={ 1 } color="gray.500">(EIP-1559)</Text> }
+        </Box>
+        <Box mt={ 1 }>
+          <Text as="span" fontWeight="500">Nonce: </Text>
+          <Text fontWeight="600" as="span">{ tx.nonce }</Text>
+        </Box>
+        <Box mt={ 1 }>
+          <Text as="span" fontWeight="500">Position: </Text>
+          <Text fontWeight="600" as="span">{ tx.position }</Text>
+        </Box>
+      </Box>
+      <Link fontSize="sm" href={ link('tx', { id: tx.hash }) }>More details</Link>
+    </>
+  );
+};
+
+export default React.memo(TxAdditionalInfoContent);

ui/txs/TxsListItem.tsx

@@ -4,11 +4,8 @@ import {
   Flex,
   Icon,
   Link,
-  Modal,
-  ModalContent,
-  ModalCloseButton,
   Text,
-  useDisclosure } from '@chakra-ui/react';
+} from '@chakra-ui/react';
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
@@ -19,7 +16,6 @@ import transactionIcon from 'icons/transactions.svg';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
-import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -40,8 +36,6 @@ const TAG_WIDTH = 48;
 const ARROW_WIDTH = 24;
 
 const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
   const dataTo = tx.to ? tx.to : tx.created_contract;
 
   const isOut = Boolean(currentAddress && currentAddress === tx.from.hash);
@@ -50,103 +44,95 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
   const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
 
   return (
-    <>
-      <ListItemMobile display="block" width="100%" isAnimated key={ tx.hash }>
-        <Flex justifyContent="space-between" mt={ 4 }>
-          <HStack>
-            <TxType types={ tx.tx_types }/>
-            <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
-          </HStack>
-          <AdditionalInfoButton onClick={ onOpen }/>
-        </Flex>
-        <Flex justifyContent="space-between" lineHeight="24px" mt={ 3 } alignItems="center">
-          <Flex>
-            <Icon
-              as={ transactionIcon }
-              boxSize="30px"
-              mr={ 2 }
-              color="link"
-            />
-            <Address width="100%">
-              <AddressLink
-                hash={ tx.hash }
-                type="transaction"
-                fontWeight="700"
-                truncation="constant"
-              />
-            </Address>
-          </Flex>
-          { tx.timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
-        </Flex>
-        { tx.method && (
-          <Flex mt={ 3 }>
-            <Text as="span" whiteSpace="pre">Method </Text>
-            <Text
-              as="span"
-              variant="secondary"
-              overflow="hidden"
-              whiteSpace="nowrap"
-              textOverflow="ellipsis"
-            >
-              { tx.method }
-            </Text>
-          </Flex>
-        ) }
-        { showBlockInfo && tx.block !== null && (
-          <Box mt={ 2 }>
-            <Text as="span">Block </Text>
-            <Link href={ link('block', { id: tx.block.toString() }) }>{ tx.block }</Link>
-          </Box>
-        ) }
-        <Flex alignItems="center" height={ 6 } mt={ 6 }>
-          <Address width={ `calc((100%-${ currentAddress ? TAG_WIDTH : ARROW_WIDTH + 8 }px)/2)` }>
-            <AddressIcon address={ tx.from }/>
-            <AddressLink
-              type="address"
-              hash={ tx.from.hash }
-              alias={ tx.from.name }
-              fontWeight="500"
-              ml={ 2 }
-              isDisabled={ isOut }
-            />
-          </Address>
-          { (isIn || isOut) ?
-            <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mr={ 2 }/> : (
-              <Icon
-                as={ rightArrowIcon }
-                boxSize={ 6 }
-                mx={ 2 }
-                color="gray.500"
-              />
-            ) }
-          <Address width="calc((100%-40px)/2)">
-            <AddressIcon address={ dataTo }/>
+    <ListItemMobile display="block" width="100%" isAnimated key={ tx.hash }>
+      <Flex justifyContent="space-between" mt={ 4 }>
+        <HStack>
+          <TxType types={ tx.tx_types }/>
+          <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
+        </HStack>
+        <TxAdditionalInfo tx={ tx } isMobile/>
+      </Flex>
+      <Flex justifyContent="space-between" lineHeight="24px" mt={ 3 } alignItems="center">
+        <Flex>
+          <Icon
+            as={ transactionIcon }
+            boxSize="30px"
+            mr={ 2 }
+            color="link"
+          />
+          <Address width="100%">
             <AddressLink
-              type="address"
-              hash={ dataTo.hash }
-              alias={ dataTo.name }
-              fontWeight="500"
-              ml={ 2 }
-              isDisabled={ isIn }
+              hash={ tx.hash }
+              type="transaction"
+              fontWeight="700"
+              truncation="constant"
             />
           </Address>
         </Flex>
+        { tx.timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
+      </Flex>
+      { tx.method && (
+        <Flex mt={ 3 }>
+          <Text as="span" whiteSpace="pre">Method </Text>
+          <Text
+            as="span"
+            variant="secondary"
+            overflow="hidden"
+            whiteSpace="nowrap"
+            textOverflow="ellipsis"
+          >
+            { tx.method }
+          </Text>
+        </Flex>
+      ) }
+      { showBlockInfo && tx.block !== null && (
         <Box mt={ 2 }>
-          <Text as="span">Value { appConfig.network.currency.symbol } </Text>
-          <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).toFormat() }</Text>
+          <Text as="span">Block </Text>
+          <Link href={ link('block', { id: tx.block.toString() }) }>{ tx.block }</Link>
         </Box>
-        <Box mt={ 2 } mb={ 3 }>
-          <Text as="span">Fee { appConfig.network.currency.symbol } </Text>
-          <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).toFormat() }</Text>
-        </Box>
-      </ListItemMobile>
-      <Modal isOpen={ isOpen } onClose={ onClose } size="full">
-        <ModalContent paddingTop={ 4 }>
-          <ModalCloseButton/>
-          <TxAdditionalInfo tx={ tx }/>
-        </ModalContent>
-      </Modal>
-    </>
+      ) }
+      <Flex alignItems="center" height={ 6 } mt={ 6 }>
+        <Address width={ `calc((100%-${ currentAddress ? TAG_WIDTH : ARROW_WIDTH + 8 }px)/2)` }>
+          <AddressIcon address={ tx.from }/>
+          <AddressLink
+            type="address"
+            hash={ tx.from.hash }
+            alias={ tx.from.name }
+            fontWeight="500"
+            ml={ 2 }
+            isDisabled={ isOut }
+          />
+        </Address>
+        { (isIn || isOut) ?
+          <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mr={ 2 }/> : (
+            <Icon
+              as={ rightArrowIcon }
+              boxSize={ 6 }
+              mx={ 2 }
+              color="gray.500"
+            />
+          ) }
+        <Address width="calc((100%-40px)/2)">
+          <AddressIcon address={ dataTo }/>
+          <AddressLink
+            type="address"
+            hash={ dataTo.hash }
+            alias={ dataTo.name }
+            fontWeight="500"
+            ml={ 2 }
+            isDisabled={ isIn }
+          />
+        </Address>
+      </Flex>
+      <Box mt={ 2 }>
+        <Text as="span">Value { appConfig.network.currency.symbol } </Text>
+        <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).toFormat() }</Text>
+      </Box>
+      <Box mt={ 2 } mb={ 3 }>
+        <Text as="span">Fee { appConfig.network.currency.symbol } </Text>
+        <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).toFormat() }</Text>
+      </Box>
+    </ListItemMobile>
   );
 };
 

ui/txs/TxsTableItem.tsx

@@ -7,10 +7,6 @@ import {
   Icon,
   VStack,
   Text,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
   Show,
   Hide,
 } from '@chakra-ui/react';
@@ -22,7 +18,6 @@ import type { Transaction } from 'types/api/transaction';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
-import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -73,20 +68,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
       key={ tx.hash }
     >
       <Td pl={ 4 }>
-        <Popover placement="right-start" openDelay={ 300 } isLazy>
-          { ({ isOpen }) => (
-            <>
-              <PopoverTrigger>
-                <AdditionalInfoButton isOpen={ isOpen }/>
-              </PopoverTrigger>
-              <PopoverContent border="1px solid" borderColor="divider">
-                <PopoverBody>
-                  <TxAdditionalInfo tx={ tx }/>
-                </PopoverBody>
-              </PopoverContent>
-            </>
-          ) }
-        </Popover>
+        <TxAdditionalInfo tx={ tx }/>
       </Td>
       <Td pr={ 4 }>
         <VStack alignItems="start" lineHeight="24px">