Merge pull request #476 from blockscout/contract-logs

сontract logs

lib/api/resources.ts

@@ -17,7 +17,7 @@ import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/ch
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { JsonRpcUrlResponse } from 'types/api/jsonRpcUrl';
-import type { LogsResponse } from 'types/api/log';
+import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log';
 import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { Stats, Charts, HomeStats } from 'types/api/stats';
 import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
@@ -156,6 +156,11 @@ export const RESOURCES = {
   address_coin_balance_chart: {
     path: '/api/v2/addresses/:id/coin-balance-history-by-day',
   },
+  address_logs: {
+    path: '/api/v2/addresses/:id/logs',
+    paginationFields: [ 'items_count' as const, 'transaction_index' as const, 'index' as const, 'block_number' as const ],
+    filterFields: [ ],
+  },
 
   // HOMEPAGE
   homepage_stats: {
@@ -211,7 +216,8 @@ export type ResourceErrorAccount<T> = ResourceError<{ errors: T }>
 export type PaginatedResources = 'blocks' | 'block_txs' |
 'txs_validated' | 'txs_pending' |
 'tx_internal_txs' | 'tx_logs' | 'tx_token_transfers' |
-'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance';
+'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance' |
+'address_logs';
 
 export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
 
@@ -239,7 +245,7 @@ Q extends 'txs_validated' ? TransactionsResponseValidated :
 Q extends 'txs_pending' ? TransactionsResponsePending :
 Q extends 'tx' ? Transaction :
 Q extends 'tx_internal_txs' ? InternalTransactionsResponse :
-Q extends 'tx_logs' ? LogsResponse :
+Q extends 'tx_logs' ? LogsResponseTx :
 Q extends 'tx_token_transfers' ? TokenTransferResponse :
 Q extends 'tx_raw_trace' ? RawTracesResponse :
 Q extends 'address' ? Address :
@@ -251,6 +257,7 @@ Q extends 'address_token_transfers' ? AddressTokenTransferResponse :
 Q extends 'address_blocks_validated' ? AddressBlocksValidatedResponse :
 Q extends 'address_coin_balance' ? AddressCoinBalanceHistoryResponse :
 Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChart :
+Q extends 'address_logs' ? LogsResponseAddress :
 Q extends 'config_json_rpc' ? JsonRpcUrlResponse :
 never;
 /* eslint-enable @typescript-eslint/indent */

types/api/log.ts

@@ -9,7 +9,7 @@ export interface Log {
   decoded: DecodedInput | null;
 }
 
-export interface LogsResponse {
+export interface LogsResponseTx {
   items: Array<Log>;
   next_page_params: {
     index: number;
@@ -17,3 +17,13 @@ export interface LogsResponse {
     transaction_hash: string;
   };
 }
+
+export interface LogsResponseAddress {
+  items: Array<Log>;
+  next_page_params: {
+    index: number;
+    items_count: number;
+    transaction_index: number;
+    block_number: number;
+  };
+}

ui/address/AddressBlocksValidated.tsx

 import { Box, Hide, Show, Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
-import type { UseQueryResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
-import type { Address, AddressBlocksValidatedResponse } from 'types/api/address';
+import type { AddressBlocksValidatedResponse } from 'types/api/address';
 
 import appConfig from 'configs/app/config';
 import { getResourceKey } from 'lib/api/useApiQuery';
@@ -22,20 +22,15 @@ import { default as Thead } from 'ui/shared/TheadSticky';
 import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
 import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
 
-interface Props {
-  addressQuery: UseQueryResult<Address>;
-}
-
-const AddressBlocksValidated = ({ addressQuery }: Props) => {
+const AddressBlocksValidated = () => {
   const [ socketAlert, setSocketAlert ] = React.useState(false);
   const queryClient = useQueryClient();
+  const router = useRouter();
 
+  const addressHash = String(router.query?.id);
   const query = useQueryWithPages({
     resourceName: 'address_blocks_validated',
-    pathParams: { id: addressQuery.data?.hash },
-    options: {
-      enabled: Boolean(addressQuery.data),
-    },
+    pathParams: { id: addressHash },
   });
 
   const handleSocketError = React.useCallback(() => {
@@ -46,7 +41,7 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
     setSocketAlert(false);
 
     queryClient.setQueryData(
-      getResourceKey('address_blocks_validated', { pathParams: { id: addressQuery.data?.hash } }),
+      getResourceKey('address_blocks_validated', { pathParams: { id: addressHash } }),
       (prevData: AddressBlocksValidatedResponse | undefined) => {
         if (!prevData) {
           return;
@@ -57,13 +52,13 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
           items: [ payload.block, ...prevData.items ],
         };
       });
-  }, [ addressQuery.data?.hash, queryClient ]);
+  }, [ addressHash, queryClient ]);
 
   const channel = useSocketChannel({
-    topic: `blocks:${ addressQuery.data?.hash.toLowerCase() }`,
+    topic: `blocks:${ addressHash.toLowerCase() }`,
     onSocketClose: handleSocketError,
     onSocketError: handleSocketError,
-    isDisabled: addressQuery.isLoading || addressQuery.isError || !addressQuery.data.hash || query.pagination.page !== 1,
+    isDisabled: !addressHash || query.pagination.page !== 1,
   });
   useSocketMessage({
     channel,

ui/address/AddressCoinBalance.tsx

 import { useQueryClient } from '@tanstack/react-query';
-import type { UseQueryResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
-import type { Address, AddressCoinBalanceHistoryResponse } from 'types/api/address';
+import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
@@ -14,20 +14,15 @@ import SocketAlert from 'ui/shared/SocketAlert';
 import AddressCoinBalanceChart from './coinBalance/AddressCoinBalanceChart';
 import AddressCoinBalanceHistory from './coinBalance/AddressCoinBalanceHistory';
 
-interface Props {
-  addressQuery: UseQueryResult<Address>;
-}
-
-const AddressCoinBalance = ({ addressQuery }: Props) => {
+const AddressCoinBalance = () => {
   const [ socketAlert, setSocketAlert ] = React.useState(false);
   const queryClient = useQueryClient();
+  const router = useRouter();
 
+  const addressHash = String(router.query?.id);
   const coinBalanceQuery = useQueryWithPages({
     resourceName: 'address_coin_balance',
-    pathParams: { id: addressQuery.data?.hash },
-    options: {
-      enabled: Boolean(addressQuery.data),
-    },
+    pathParams: { id: addressHash },
   });
 
   const handleSocketError = React.useCallback(() => {
@@ -38,7 +33,7 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
     setSocketAlert(false);
 
     queryClient.setQueryData(
-      getResourceKey('address_coin_balance', { pathParams: { id: addressQuery.data?.hash } }),
+      getResourceKey('address_coin_balance', { pathParams: { id: addressHash } }),
       (prevData: AddressCoinBalanceHistoryResponse | undefined) => {
         if (!prevData) {
           return;
@@ -52,13 +47,13 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
           ],
         };
       });
-  }, [ addressQuery.data?.hash, queryClient ]);
+  }, [ addressHash, queryClient ]);
 
   const channel = useSocketChannel({
-    topic: `addresses:${ addressQuery.data?.hash.toLowerCase() }`,
+    topic: `addresses:${ addressHash.toLowerCase() }`,
     onSocketClose: handleSocketError,
     onSocketError: handleSocketError,
-    isDisabled: addressQuery.isLoading || addressQuery.isError || !addressQuery.data.hash || coinBalanceQuery.pagination.page !== 1,
+    isDisabled: !addressHash || coinBalanceQuery.pagination.page !== 1,
   });
   useSocketMessage({
     channel,
@@ -69,7 +64,7 @@ const AddressCoinBalance = ({ addressQuery }: Props) => {
   return (
     <>
       { socketAlert && <SocketAlert mb={ 6 }/> }
-      <AddressCoinBalanceChart addressQuery={ addressQuery }/>
+      <AddressCoinBalanceChart addressHash={ addressHash }/>
       <AddressCoinBalanceHistory query={ coinBalanceQuery }/>
     </>
   );

ui/address/AddressDetails.tsx

@@ -98,7 +98,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
           >
             <AddressLink hash={ addressQuery.data.creator_address_hash } truncation="constant"/>
             <Text whiteSpace="pre"> at </Text>
-            <AddressLink hash={ addressQuery.data.creation_tx_hash } truncation="constant"/>
+            <AddressLink hash={ addressQuery.data.creation_tx_hash } type="transaction" truncation="constant"/>
           </DetailsInfoItem>
         ) }
         <AddressBalance data={ addressQuery.data }/>

ui/address/coinBalance/AddressCoinBalanceChart.tsx

-import type { UseQueryResult } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
-import type { Address } from 'types/api/address';
-
 import appConfig from 'configs/app/config';
 import useApiQuery from 'lib/api/useApiQuery';
 import ChartWidget from 'ui/shared/chart/ChartWidget';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 interface Props {
-  addressQuery: UseQueryResult<Address>;
+  addressHash: string;
 }
 
-const AddressCoinBalanceChart = ({ addressQuery }: Props) => {
+const AddressCoinBalanceChart = ({ addressHash }: Props) => {
   const { data, isLoading, isError } = useApiQuery('address_coin_balance_chart', {
-    pathParams: { id: addressQuery.data?.hash },
-    queryOptions: { enabled: Boolean(addressQuery.data?.hash) },
+    pathParams: { id: addressHash },
   });
 
   const items = React.useMemo(() => data?.map(({ date, value }) => ({

ui/address/logs/AddressLogs.tsx

+import { Box } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { Element } from 'react-scroll';
+
+import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import ActionBar from 'ui/shared/ActionBar';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import LogItem from 'ui/shared/logs/LogItem';
+import LogSkeleton from 'ui/shared/logs/LogSkeleton';
+import Pagination from 'ui/shared/Pagination';
+
+const SCROLL_PARAMS = {
+  elem: 'address-logs',
+  offset: -100,
+};
+
+const AddressLogs = () => {
+  const router = useRouter();
+
+  const addressHash = String(router.query?.id);
+  const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
+    resourceName: 'address_logs',
+    pathParams: { id: addressHash },
+    scroll: SCROLL_PARAMS,
+  });
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  const bar = isPaginationVisible ? (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  ) : null;
+
+  if (isLoading) {
+    return (
+      <Box>
+        { bar }
+        <LogSkeleton/>
+        <LogSkeleton/>
+      </Box>
+    );
+  }
+
+  if (data.items.length === 0) {
+    return <span>There are no logs for this address.</span>;
+  }
+
+  return (
+    <Element name={ SCROLL_PARAMS.elem }>
+      { bar }
+      { data.items.map((item, index) => <LogItem key={ index } { ...item } type="address"/>) }
+    </Element>
+  );
+};
+
+export default AddressLogs;

ui/pages/Address.tsx

-import { Flex, Tag } from '@chakra-ui/react';
+import { Flex, Skeleton, Tag } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import notEmpty from 'lib/notEmpty';
 import AddressBlocksValidated from 'ui/address/AddressBlocksValidated';
 import AddressCoinBalance from 'ui/address/AddressCoinBalance';
 import AddressDetails from 'ui/address/AddressDetails';
 import AddressInternalTxs from 'ui/address/AddressInternalTxs';
 import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
 import AddressTxs from 'ui/address/AddressTxs';
+import AddressLogs from 'ui/address/logs/AddressLogs';
 import TextAd from 'ui/shared/ad/TextAd';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
+import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
 
 const AddressPageContent = () => {
   const router = useRouter();
@@ -30,28 +33,37 @@ const AddressPageContent = () => {
     ...(addressQuery.data?.watchlist_names || []),
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
-  const tabs: Array<RoutedTab> = [
-    { id: 'txs', title: 'Transactions', component: <AddressTxs/> },
-    { id: 'token_transfers', title: 'Token transfers', component: <AddressTokenTransfers/> },
-    { id: 'tokens', title: 'Tokens', component: null },
-    { id: 'internal_txns', title: 'Internal txns', component: <AddressInternalTxs/> },
-    { id: 'coin_balance_history', title: 'Coin balance history', component: <AddressCoinBalance addressQuery={ addressQuery }/> },
-    // temporary show this tab in all address
-    // later api will return info about available tabs
-    { id: 'blocks_validated', title: 'Blocks validated', component: <AddressBlocksValidated addressQuery={ addressQuery }/> },
-  ];
+  const isContract = addressQuery.data?.is_contract;
+
+  const tabs: Array<RoutedTab> = React.useMemo(() => {
+    return [
+      { id: 'txs', title: 'Transactions', component: <AddressTxs/> },
+      { id: 'token_transfers', title: 'Token transfers', component: <AddressTokenTransfers/> },
+      { id: 'tokens', title: 'Tokens', component: null },
+      { id: 'internal_txns', title: 'Internal txns', component: <AddressInternalTxs/> },
+      { id: 'coin_balance_history', title: 'Coin balance history', component: <AddressCoinBalance/> },
+      // temporary show this tab in all address
+      // later api will return info about available tabs
+      { id: 'blocks_validated', title: 'Blocks validated', component: <AddressBlocksValidated/> },
+      isContract ? { id: 'logs', title: 'Logs', component: <AddressLogs/> } : undefined,
+    ].filter(notEmpty);
+  }, [ isContract ]);
 
   const tagsNode = tags.length > 0 ? <Flex columnGap={ 2 }>{ tags }</Flex> : null;
 
   return (
     <Page>
       <TextAd mb={ 6 }/>
-      <PageTitle
-        text={ `${ addressQuery.data?.is_contract ? 'Contract' : 'Address' } details` }
-        additionals={ tagsNode }
-      />
+      { addressQuery.isLoading ? (
+        <Skeleton h={ 10 } w="260px" mb={ 6 }/>
+      ) : (
+        <PageTitle
+          text={ `${ addressQuery.data?.is_contract ? 'Contract' : 'Address' } details` }
+          additionals={ tagsNode }
+        />
+      ) }
       <AddressDetails addressQuery={ addressQuery }/>
-      <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>
+      { addressQuery.isLoading ? <SkeletonTabs/> : <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/> }
     </Page>
   );
 };

ui/tx/TxDecodedInputData/TxDecodedInputData.pw.tsx → ui/shared/logs/LogDecodedInputData.pw.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 import * as mocks from 'mocks/txs/decodedInputData';
 import TestApp from 'playwright/TestApp';
 
-import TxDecodedInputData from './TxDecodedInputData';
+import LogDecodedInputData from './LogDecodedInputData';
 
 test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
   const component = await mount(
     <TestApp>
-      <TxDecodedInputData data={ mocks.withIndexedFields }/>
+      <LogDecodedInputData data={ mocks.withIndexedFields }/>
     </TestApp>,
   );
   await expect(component).toHaveScreenshot();
@@ -18,7 +18,7 @@ test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
 test('without indexed fields +@mobile', async({ mount }) => {
   const component = await mount(
     <TestApp>
-      <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
+      <LogDecodedInputData data={ mocks.withoutIndexedFields }/>
     </TestApp>,
   );
   await expect(component).toHaveScreenshot();

ui/tx/TxDecodedInputData/TxDecodedInputData.tsx → ui/shared/logs/LogDecodedInputData.tsx

@@ -68,7 +68,7 @@ interface Props {
   data: DecodedInput;
 }
 
-const TxDecodedInputData = ({ data }: Props) => {
+const LogDecodedInputData = ({ data }: Props) => {
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
   const hasIndexed = data.parameters.some(({ indexed }) => indexed !== undefined);
 
@@ -175,4 +175,4 @@ const TxDecodedInputData = ({ data }: Props) => {
   );
 };
 
-export default TxDecodedInputData;
+export default LogDecodedInputData;

ui/tx/logs/TxLogItem.pw.tsx → ui/shared/logs/LogItem.pw.tsx

@@ -5,7 +5,7 @@ import * as addressMocks from 'mocks/address/address';
 import * as inputDataMocks from 'mocks/txs/decodedInputData';
 import TestApp from 'playwright/TestApp';
 
-import TxLogItem from './TxLogItem';
+import LogItem from './LogItem';
 
 const TOPICS = [
   '0x3a4ec416703c36a61a4b1f690847f1963a6829eac0b52debd40a23b66c142a56',
@@ -18,12 +18,13 @@ const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee
 test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
   const component = await mount(
     <TestApp>
-      <TxLogItem
+      <LogItem
         index={ 42 }
         decoded={ inputDataMocks.withIndexedFields }
         address={ addressMocks.withName }
         topics={ TOPICS }
         data={ DATA }
+        type="tx"
       />
     </TestApp>,
   );
@@ -33,12 +34,13 @@ test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
 test('without decoded input data +@mobile', async({ mount }) => {
   const component = await mount(
     <TestApp>
-      <TxLogItem
+      <LogItem
         index={ 42 }
         decoded={ null }
         address={ addressMocks.withoutName }
         topics={ TOPICS }
         data={ DATA }
+        type="tx"
       />
     </TestApp>,
   );

ui/tx/logs/TxLogItem.tsx → ui/shared/logs/LogItem.tsx

@@ -10,10 +10,12 @@ import notEmpty from 'lib/notEmpty';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
-import TxLogTopic from 'ui/tx/logs/TxLogTopic';
-import DecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
+import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
+import LogTopic from 'ui/shared/logs/LogTopic';
 
-type Props = Log;
+type Props = Log & {
+  type: 'address' | 'tx';
+};
 
 const RowHeader = ({ children }: { children: React.ReactNode }) => (
   <GridItem _notFirst={{ my: { base: 4, lg: 0 } }}>
@@ -21,7 +23,7 @@ const RowHeader = ({ children }: { children: React.ReactNode }) => (
   </GridItem>
 );
 
-const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
+const TxLogItem = ({ address, index, topics, data, decoded, type }: Props) => {
 
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
@@ -39,7 +41,7 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
         pt: 0,
       }}
     >
-      { !decoded && (
+      { !decoded && type === 'tx' && (
         <GridItem colSpan={{ base: 1, lg: 2 }}>
           <Alert status="warning" display="inline-table" whiteSpace="normal">
             To see accurate decoded input data, the contract must be verified.{ space }
@@ -69,14 +71,14 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
         <>
           <RowHeader>Decode input data</RowHeader>
           <GridItem>
-            <DecodedInputData data={ decoded }/>
+            <LogDecodedInputData data={ decoded }/>
           </GridItem>
         </>
       ) }
       <RowHeader>Topics</RowHeader>
       <GridItem>
         { topics.filter(notEmpty).map((item, index) => (
-          <TxLogTopic
+          <LogTopic
             key={ index }
             hex={ item }
             index={ index }

ui/tx/logs/TxLogSkeleton.tsx → ui/shared/logs/LogSkeleton.tsx

@@ -15,7 +15,7 @@ const TopicRow = () => (
   </Flex>
 );
 
-const TxLogSkeleton = () => {
+const LogSkeleton = () => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
@@ -55,4 +55,4 @@ const TxLogSkeleton = () => {
   );
 };
 
-export default TxLogSkeleton;
+export default LogSkeleton;

ui/tx/logs/TxLogTopic.pw.tsx → ui/shared/logs/LogTopic.pw.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 
 import TestApp from 'playwright/TestApp';
 
-import TxLogTopic from './TxLogTopic';
+import LogTopic from './LogTopic';
 
 test('address view +@mobile -@default', async({ mount }) => {
   const component = await mount(
     <TestApp>
-      <TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
+      <LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
     </TestApp>,
   );
   await component.locator('select[aria-label="Data type"]').selectOption('address');
@@ -19,7 +19,7 @@ test('address view +@mobile -@default', async({ mount }) => {
 test('hex view +@mobile -@default', async({ mount }) => {
   const component = await mount(
     <TestApp>
-      <TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
+      <LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
     </TestApp>,
   );
   await component.locator('select[aria-label="Data type"]').selectOption('hex');

ui/tx/logs/TxLogTopic.tsx → ui/shared/logs/LogTopic.tsx

@@ -24,7 +24,7 @@ const VALUE_CONVERTERS: Record<DataType, (hex: string) => string> = {
 };
 const OPTIONS: Array<DataType> = [ 'hex', 'address', 'text', 'number' ];
 
-const TxLogTopic = ({ hex, index }: Props) => {
+const LogTopic = ({ hex, index }: Props) => {
   const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>('hex');
 
   const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -84,4 +84,4 @@ const TxLogTopic = ({ hex, index }: Props) => {
   );
 };
 
-export default React.memo(TxLogTopic);
+export default React.memo(LogTopic);

ui/shared/skeletons/SkeletonTabs.tsx

+import { Flex, Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  className?: string;
+}
+
+const SkeletonTabs = ({ className }: Props) => {
+  return (
+    <Flex my={ 8 } className={ className }>
+      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="100px"/>
+      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="120px"/>
+      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="80px" display={{ base: 'none', lg: 'block' }}/>
+      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="100px" display={{ base: 'none', lg: 'block' }}/>
+      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="140px" display={{ base: 'none', lg: 'block' }}/>
+    </Flex>
+  );
+};
+
+export default chakra(SkeletonTabs);

ui/tx/TxDetails.tsx

@@ -35,6 +35,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 // import PrevNext from 'ui/shared/PrevNext';
+import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import RawInputData from 'ui/shared/RawInputData';
 import TextSeparator from 'ui/shared/TextSeparator';
 import TxStatus from 'ui/shared/TxStatus';
@@ -42,7 +43,6 @@ import Utilization from 'ui/shared/Utilization/Utilization';
 import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
 import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
 import TxRevertReason from 'ui/tx/details/TxRevertReason';
-import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
 import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
@@ -383,7 +383,7 @@ const TxDetails = () => {
               title="Decoded input data"
               hint="Decoded input data"
             >
-              <TxDecodedInputData data={ data.decoded_input }/>
+              <LogDecodedInputData data={ data.decoded_input }/>
             </DetailsInfoItem>
           ) }
         </>

ui/tx/TxLogs.tsx

@@ -5,9 +5,9 @@ import { SECOND } from 'lib/consts';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import LogItem from 'ui/shared/logs/LogItem';
+import LogSkeleton from 'ui/shared/logs/LogSkeleton';
 import Pagination from 'ui/shared/Pagination';
-import TxLogItem from 'ui/tx/logs/TxLogItem';
-import TxLogSkeleton from 'ui/tx/logs/TxLogSkeleton';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
 import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
@@ -33,8 +33,8 @@ const TxLogs = () => {
   if (isLoading || txInfo.isLoading) {
     return (
       <Box>
-        <TxLogSkeleton/>
-        <TxLogSkeleton/>
+        <LogSkeleton/>
+        <LogSkeleton/>
       </Box>
     );
   }
@@ -50,7 +50,7 @@ const TxLogs = () => {
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>
       ) }
-      { data.items.map((item, index) => <TxLogItem key={ index } { ...item }/>) }
+      { data.items.map((item, index) => <LogItem key={ index } { ...item } type="tx"/>) }
     </Box>
   );
 };

ui/tx/details/TxRevertReason.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { TransactionRevertReason } from 'types/api/transaction';
 
 import hexToUtf8 from 'lib/hexToUtf8';
-import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
+import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 
 type Props = TransactionRevertReason;
 
@@ -31,7 +31,7 @@ const TxRevertReason = (props: Props) => {
     );
   }
 
-  return <TxDecodedInputData data={ props }/>;
+  return <LogDecodedInputData data={ props }/>;
 };
 
 export default React.memo(TxRevertReason);