Merge pull request #525 from blockscout/address-logs-tx

tx info in address logs

types/api/log.ts

@@ -7,6 +7,7 @@ export interface Log {
   data: string;
   index: number;
   decoded: DecodedInput | null;
+  tx_hash: string | null;
 }
 
 export interface LogsResponseTx {

ui/shared/logs/LogItem.pw.tsx

@@ -24,7 +24,8 @@ test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
         address={ addressMocks.withName }
         topics={ TOPICS }
         data={ DATA }
-        type="tx"
+        type="transaction"
+        tx_hash={ null }
       />
     </TestApp>,
   );
@@ -40,7 +41,8 @@ test('without decoded input data +@mobile', async({ mount }) => {
         address={ addressMocks.withoutName }
         topics={ TOPICS }
         data={ DATA }
-        type="tx"
+        type="transaction"
+        tx_hash={ null }
       />
     </TestApp>,
   );

ui/shared/logs/LogItem.tsx

@@ -14,7 +14,7 @@ import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import LogTopic from 'ui/shared/logs/LogTopic';
 
 type Props = Log & {
-  type: 'address' | 'tx';
+  type: 'address' | 'transaction';
 };
 
 const RowHeader = ({ children }: { children: React.ReactNode }) => (
@@ -23,11 +23,13 @@ const RowHeader = ({ children }: { children: React.ReactNode }) => (
   </GridItem>
 );
 
-const TxLogItem = ({ address, index, topics, data, decoded, type }: Props) => {
+const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash }: Props) => {
 
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
+  const hasTxInfo = type === 'address' && txHash;
+
   return (
     <Grid
       gridTemplateColumns={{ base: 'minmax(0, 1fr)', lg: '200px minmax(0, 1fr)' }}
@@ -41,7 +43,7 @@ const TxLogItem = ({ address, index, topics, data, decoded, type }: Props) => {
         pt: 0,
       }}
     >
-      { !decoded && type === 'tx' && (
+      { !decoded && type === 'transaction' && (
         <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 }
@@ -49,11 +51,15 @@ const TxLogItem = ({ address, index, topics, data, decoded, type }: Props) => {
           </Alert>
         </GridItem>
       ) }
-      <RowHeader>Address</RowHeader>
+      { hasTxInfo ? <RowHeader>Transaction</RowHeader> : <RowHeader>Address</RowHeader> }
       <GridItem display="flex" alignItems="center">
         <Address mr={{ base: 9, lg: 0 }}>
-          <AddressIcon address={ address }/>
-          <AddressLink type="address" hash={ address.hash } alias={ address.name } ml={ 2 }/>
+          { !hasTxInfo && <AddressIcon address={ address } mr={ 2 }/> }
+          <AddressLink
+            hash={ hasTxInfo ? txHash : address.hash }
+            alias={ hasTxInfo ? undefined : address.name }
+            type={ type }
+          />
         </Address>
         { /* api doesn't have find topic feature yet */ }
         { /* <Tooltip label="Find matches topic">
@@ -93,4 +99,4 @@ const TxLogItem = ({ address, index, topics, data, decoded, type }: Props) => {
   );
 };
 
-export default React.memo(TxLogItem);
+export default React.memo(LogItem);

ui/tx/TxLogs.tsx

@@ -50,7 +50,7 @@ const TxLogs = () => {
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>
       ) }
-      { data.items.map((item, index) => <LogItem key={ index } { ...item } type="tx"/>) }
+      { data.items.map((item, index) => <LogItem key={ index } { ...item } type="transaction"/>) }
     </Box>
   );
 };