token transfer tx info

ui/home/LatestTxsItem.tsx

@@ -3,16 +3,8 @@ import {
   Flex,
   HStack,
   Icon,
-  Modal,
-  ModalContent,
-  ModalCloseButton,
   Text,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
   useColorModeValue,
-  useDisclosure,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -24,7 +16,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';
@@ -44,7 +35,6 @@ const LatestBlocksItem = ({ tx }: Props) => {
   const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
 
   const isMobile = useIsMobile();
-  const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <Box
@@ -56,29 +46,14 @@ const LatestBlocksItem = ({ tx }: Props) => {
       _last={{ borderBottom: '1px solid', borderColor }}
     >
       <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={ borderColor }>
-                  <PopoverBody>
-                    <TxAdditionalInfo tx={ tx }/>
-                  </PopoverBody>
-                </PopoverContent>
-              </>
-            ) }
-          </Popover>
-        ) }
+        { !isMobile && <TxAdditionalInfo tx={ tx }/> }
         <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 }
@@ -149,12 +124,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

-import { Text, Flex, Tag, Icon, useColorModeValue } from '@chakra-ui/react';
+import { Text, Flex, Tag, Icon, useColorModeValue, Box } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -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;
@@ -54,10 +54,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 && (
+          <Box position="absolute" top={ 0 } right={ 0 }>
+            <TxAdditionalInfo hash={ txHash } isMobile/>
+          </Box>
+        ) }
       </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, useColorModeValue } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
+import {
+  Modal,
+  ModalContent,
+  ModalCloseButton,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useDisclosure,
+  useColorModeValue,
+} 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 sectionBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-  const sectionProps = {
-    borderBottom: '1px solid',
-    borderColor: sectionBorderColor,
-    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 popoverBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  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={ popoverBorderColor }>
+            <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, useColorModeValue } 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 sectionBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+  const sectionProps = {
+    borderBottom: '1px solid',
+    borderColor: sectionBorderColor,
+    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,12 +4,9 @@ import {
   Flex,
   Icon,
   Link,
-  Modal,
-  ModalContent,
-  ModalCloseButton,
   Text,
   useColorModeValue,
-  useDisclosure } from '@chakra-ui/react';
+} from '@chakra-ui/react';
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
@@ -20,7 +17,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 iconColor = useColorModeValue('blue.600', 'blue.300');
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataTo = tx.to ? tx.to : tx.created_contract;
@@ -52,101 +46,93 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
   const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
 
   return (
-    <>
-      <Box width="100%" borderBottom="1px solid" borderColor={ borderColor } _first={{ borderTop: '1px solid', borderColor }}>
-        <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={ iconColor }
-            />
-            <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 }/>
+    <Box width="100%" borderBottom="1px solid" borderColor={ borderColor } _first={{ borderTop: '1px solid', borderColor }}>
+      <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={ iconColor }
+          />
+          <Address width="100%">
             <AddressLink
-              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
-              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>
-        </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>
+          <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
+            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
+            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>
-      <Modal isOpen={ isOpen } onClose={ onClose } size="full">
-        <ModalContent paddingTop={ 4 }>
-          <ModalCloseButton/>
-          <TxAdditionalInfo tx={ tx }/>
-        </ModalContent>
-      </Modal>
-    </>
+    </Box>
   );
 };
 

ui/txs/TxsTableItem.tsx

@@ -7,11 +7,6 @@ import {
   Icon,
   VStack,
   Text,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  useColorModeValue,
   Show,
   Hide,
 } from '@chakra-ui/react';
@@ -22,7 +17,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';
@@ -63,24 +57,10 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
     </Address>
   );
 
-  const infoBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   return (
     <Tr>
       <Td pl={ 4 }>
-        <Popover placement="right-start" openDelay={ 300 } isLazy>
-          { ({ isOpen }) => (
-            <>
-              <PopoverTrigger>
-                <AdditionalInfoButton isOpen={ isOpen }/>
-              </PopoverTrigger>
-              <PopoverContent border="1px solid" borderColor={ infoBorderColor }>
-                <PopoverBody>
-                  <TxAdditionalInfo tx={ tx }/>
-                </PopoverBody>
-              </PopoverContent>
-            </>
-          ) }
-        </Popover>
+        <TxAdditionalInfo tx={ tx }/>
       </Td>
       <Td pr={ 4 }>
         <VStack alignItems="start" lineHeight="24px">