Support emitted event date on the logs list (#3268)

* Support emitted event date on the logs list

* change copy button alignment in Logs

* update screenshots

stubs/log.ts

@@ -32,4 +32,5 @@ export const LOG: Log = {
     null,
   ],
   transaction_hash: TX_HASH,
+  block_timestamp: '2022-02-02T12:00:00Z',
 };

types/api/log.ts

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

ui/shared/logs/LogDecodedInputDataTable.tsx

@@ -43,7 +43,7 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement<DecodedInpu
     if (typeof value === 'object') {
       const text = JSON.stringify(value, undefined, 4);
       return (
-        <Flex alignItems="flex-start" justifyContent="space-between" whiteSpace="normal" wordBreak="break-all">
+        <Flex alignItems="flex-start" whiteSpace="normal" wordBreak="break-all">
           <TruncatedText text={ text } loading={ isLoading }/>
           <CopyToClipboard text={ text } isLoading={ isLoading }/>
         </Flex>
@@ -51,7 +51,7 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement<DecodedInpu
     }
 
     return (
-      <Flex alignItems="flex-start" justifyContent="space-between" whiteSpace="normal" wordBreak="break-all">
+      <Flex alignItems="flex-start" whiteSpace="normal" wordBreak="break-all">
         <TruncatedText text={ value } loading={ isLoading }/>
         <CopyToClipboard text={ value } isLoading={ isLoading }/>
       </Flex>

ui/shared/logs/LogItem.pw.tsx

@@ -24,6 +24,7 @@ test('with decoded input data +@mobile +@dark-mode', async({ render }) => {
       data={ DATA }
       type="transaction"
       transaction_hash={ null }
+      block_timestamp={ null }
     />,
   );
   await expect(component).toHaveScreenshot();
@@ -39,6 +40,7 @@ test('without decoded input data +@mobile', async({ render }) => {
       data={ DATA }
       type="transaction"
       transaction_hash={ null }
+      block_timestamp={ null }
     />,
   );
   await expect(component).toHaveScreenshot();
@@ -54,6 +56,7 @@ test('with default data type', async({ render }) => {
       data="0x6475636b"
       type="address"
       transaction_hash="0x404bd417203769f968aacb1d66211510db86b81303b0c68283b4eb4572e6845c"
+      block_timestamp="2022-02-02T12:00:00Z"
       defaultDataType="UTF-8"
     />,
   );

ui/shared/logs/LogItem.tsx

@@ -11,6 +11,7 @@ import { Alert } from 'toolkit/chakra/alert';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { space } from 'toolkit/utils/htmlEntities';
+import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
@@ -33,7 +34,19 @@ const RowHeader = ({ children, isLoading }: { children: React.ReactNode; isLoadi
   </GridItem>
 );
 
-const LogItem = ({ address, index, topics, data, decoded, type, transaction_hash: txHash, isLoading, defaultDataType, chainData }: Props) => {
+const LogItem = ({
+  address,
+  index,
+  topics,
+  data,
+  decoded,
+  type,
+  transaction_hash: txHash,
+  block_timestamp: blockTimestamp,
+  isLoading,
+  defaultDataType,
+  chainData,
+}: Props) => {
 
   const hasTxInfo = type === 'address' && txHash;
 
@@ -93,6 +106,14 @@ const LogItem = ({ address, index, topics, data, decoded, type, transaction_hash
           { index }
         </LogIndex>
       </GridItem>
+      { hasTxInfo && blockTimestamp ? (
+        <>
+          <RowHeader isLoading={ isLoading }>Timestamp</RowHeader>
+          <GridItem>
+            <DetailedInfoTimestamp timestamp={ blockTimestamp } isLoading={ isLoading }/>
+          </GridItem>
+        </>
+      ) : null }
       { decoded && (
         <>
           <RowHeader isLoading={ isLoading }>Decode input data</RowHeader>