address 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/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 = () => {
-  return <Box>FOO BAR</Box>;
+  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/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/tx/TxDetails.tsx

@@ -20,6 +20,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';
@@ -27,7 +28,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';
 
@@ -336,7 +336,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);