TxLogItem test

mocks/address/address.ts

@@ -0,0 +1,21 @@
+import type { AddressParam } from 'types/api/addressParams';
+
+export const withName: AddressParam = {
+  hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+  implementation_name: null,
+  is_contract: true,
+  name: 'ArianeeStore',
+  private_tags: [],
+  watchlist_names: [],
+  public_tags: [],
+};
+
+export const withoutName: AddressParam = {
+  hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+  implementation_name: null,
+  is_contract: true,
+  name: null,
+  private_tags: [],
+  watchlist_names: [],
+  public_tags: [],
+};

playwright/viewports.ts

@@ -1,3 +1,3 @@
 export const DESKTOP = { width: 1000, height: 625 };
-
+export const DESKTOP_XL = { width: 1440, height: 900 };
 export const MOBILE = { width: 390, height: 844 };

types/api/addressParams.ts

@@ -11,7 +11,7 @@ export interface WatchlistName {
 
 export interface AddressParam {
   hash: string;
-  implementation_name: string;
+  implementation_name: string | null;
   name: string | null;
   is_contract: boolean;
   private_tags: Array<AddressTag> | null;

types/api/log.ts

@@ -3,7 +3,7 @@ import type { DecodedInput } from './decodedInput';
 
 export interface Log {
   address: AddressParam;
-  topics: Array<string>;
+  topics: Array<string | null>;
   data: string;
   index: number;
   decoded: DecodedInput | null;

ui/tx/logs/TxLogItem.pw.tsx

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as addressMocks from 'mocks/address/address';
+import * as inputDataMocks from 'mocks/txs/decodedInputData';
+import RenderWithChakra from 'playwright/RenderWithChakra';
+import { DESKTOP, MOBILE } from 'playwright/viewports';
+
+import TxLogItem from './TxLogItem';
+
+const TOPICS = [
+  '0x3a4ec416703c36a61a4b1f690847f1963a6829eac0b52debd40a23b66c142a56',
+  '0x0000000000000000000000000000000000000000000000000000000005001bcf',
+  '0xe835d1028984e9e6e7d016b77164eacbcc6cc061e9333c0b37982b504f7ea791',
+  null,
+];
+const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee';
+
+[
+  { name: 'desktop', viewport: DESKTOP },
+  { name: 'mobile', viewport: MOBILE },
+].forEach(({ name, viewport }) => {
+  test.describe(name, () => {
+    test.use({ viewport });
+
+    test('with decoded input data', async({ mount }) => {
+      const component = await mount(
+        <RenderWithChakra>
+          <TxLogItem
+            index={ 42 }
+            decoded={ inputDataMocks.withIndexedFields }
+            address={ addressMocks.withName }
+            topics={ TOPICS }
+            data={ DATA }
+          />
+        </RenderWithChakra>,
+      );
+      await expect(component).toHaveScreenshot();
+    });
+
+    test('without decoded input data', async({ mount }) => {
+      const component = await mount(
+        <RenderWithChakra>
+          <TxLogItem
+            index={ 42 }
+            decoded={ null }
+            address={ addressMocks.withoutName }
+            topics={ TOPICS }
+            data={ DATA }
+          />
+        </RenderWithChakra>,
+      );
+      await expect(component).toHaveScreenshot();
+    });
+
+    test('dark color mode', async({ mount }) => {
+      const component = await mount(
+        <RenderWithChakra colorMode="dark">
+          <TxLogItem
+            index={ 42 }
+            decoded={ inputDataMocks.withIndexedFields }
+            address={ addressMocks.withName }
+            topics={ TOPICS }
+            data={ DATA }
+          />
+        </RenderWithChakra>,
+      );
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});

ui/tx/logs/TxLogItem.tsx

@@ -6,6 +6,7 @@ import type { Log } from 'types/api/log';
 // import searchIcon from 'icons/search.svg';
 import { space } from 'lib/html-entities';
 import link from 'lib/link/link';
+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';
@@ -74,7 +75,7 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
       ) }
       <RowHeader>Topics</RowHeader>
       <GridItem>
-        { topics.filter(Boolean).map((item, index) => (
+        { topics.filter(notEmpty).map((item, index) => (
           <TxLogTopic
             key={ index }
             hex={ item }