tests for TxDecodedInputData

.eslintrc.js

@@ -195,7 +195,7 @@ module.exports = {
         groups: [
           'module',
           '/types/',
-          [ '/^configs/', '/^data/', '/^deploy/', '/^icons/', '/^lib/', '/^pages/', '/^playwright/', '/^theme/', '/^ui/' ],
+          [ '/^configs/', '/^data/', '/^deploy/', '/^icons/', '/^lib/', '/^mocks/', '/^pages/', '/^playwright/', '/^theme/', '/^ui/' ],
           [ 'parent', 'sibling', 'index' ],
         ],
         alphabetize: { order: 'asc', ignoreCase: true },

mocks/txs/decodedInputData.ts

+import type { DecodedInput } from 'types/api/decodedInput';
+
+export const withoutIndexedFields: DecodedInput = {
+  method_call: 'CreditSpended(uint256 _type, uint256 _quantity)',
+  method_id: '58cdf94a',
+  parameters: [
+    {
+      name: '_type',
+      type: 'uint256',
+      value: '3',
+    },
+    {
+      name: '_quantity',
+      type: 'uint256',
+      value: '1',
+    },
+  ],
+};
+
+export const withIndexedFields: DecodedInput = {
+  method_call: 'Transfer(address indexed from, address indexed to, uint256 value)',
+  method_id: 'ddf252ad',
+  parameters: [
+    {
+      indexed: true,
+      name: 'from',
+      type: 'address',
+      value: '0xd789a607ceac2f0e14867de4eb15b15c9ffb5859',
+    },
+    {
+      indexed: true,
+      name: 'to',
+      type: 'address',
+      value: '0x7d20a8d54f955b4483a66ab335635ab66e151c51',
+    },
+    {
+      indexed: false,
+      name: 'value',
+      type: 'uint256',
+      value: '31567373703130350',
+    },
+  ],
+};

playwright/viewports.ts

+export const DESKTOP = { width: 1000, height: 625 };
+
+export const MOBILE = { width: 390, height: 844 };

ui/tx/TxDecodedInputData/TxDecodedInputData.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as mocks from 'mocks/txs/decodedInputData';
+import RenderWithChakra from 'playwright/RenderWithChakra';
+import { DESKTOP, MOBILE } from 'playwright/viewports';
+
+import TxDecodedInputData from './TxDecodedInputData';
+
+test.describe('desktop', () => {
+  test.use({ viewport: DESKTOP });
+
+  test('dark color mode', async({ mount }) => {
+    const component = await mount(
+      <RenderWithChakra colorMode="dark">
+        <TxDecodedInputData data={ mocks.withIndexedFields }/>
+      </RenderWithChakra>,
+    );
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with indexed fields', async({ mount }) => {
+    const component = await mount(
+      <RenderWithChakra>
+        <TxDecodedInputData data={ mocks.withIndexedFields }/>
+      </RenderWithChakra>,
+    );
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('without indexed fields', async({ mount }) => {
+    const component = await mount(
+      <RenderWithChakra>
+        <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
+      </RenderWithChakra>,
+    );
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: MOBILE });
+
+  test('dark color mode', async({ mount }) => {
+    const component = await mount(
+      <RenderWithChakra colorMode="dark">
+        <TxDecodedInputData data={ mocks.withIndexedFields }/>
+      </RenderWithChakra>,
+    );
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with indexed fields', async({ mount }) => {
+    const component = await mount(
+      <RenderWithChakra>
+        <TxDecodedInputData data={ mocks.withIndexedFields }/>
+      </RenderWithChakra>,
+    );
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('without indexed fields', async({ mount }) => {
+    const component = await mount(
+      <RenderWithChakra>
+        <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
+      </RenderWithChakra>,
+    );
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/tx/TxDetails.tsx

@@ -27,7 +27,7 @@ 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';
+import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
 import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 

ui/tx/details/TxRevertReason.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { TransactionRevertReason } from 'types/api/transaction';
 
-import TxDecodedInputData from 'ui/tx/TxDecodedInputData';
+import TxDecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
 
 type Props = TransactionRevertReason;
 

ui/tx/logs/TxLogItem.tsx

@@ -10,7 +10,7 @@ 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';
+import DecodedInputData from 'ui/tx/TxDecodedInputData/TxDecodedInputData';
 
 type Props = Log;