TxInternals tests

.vscode/tasks.json

@@ -106,7 +106,7 @@
         // PW TESTS
         {
             "type": "shell",
-            "command": "${input:pwDebugFlag} yarn test:pw:local ${relativeFileDirname}/${fileBasenameNoExtension} ${input:pwArgs}",
+            "command": "${input:pwDebugFlag} yarn test:pw:local ${relativeFileDirname}/${fileBasename} ${input:pwArgs}",
             "problemMatcher": [],
             "label": "test: playwright: local for current file",
             "detail": "run visual components tests for current file",
@@ -124,7 +124,7 @@
         },
         {
             "type": "shell",
-            "command": "yarn test:pw:docker ${relativeFileDirname}/${fileBasenameNoExtension} ${input:pwArgs}",
+            "command": "yarn test:pw:docker ${relativeFileDirname}/${fileBasename} ${input:pwArgs}",
             "problemMatcher": [],
             "label": "test: playwright: docker for current file",
             "detail": "run visual components tests for current file",
@@ -199,7 +199,7 @@
         },
         {
             "type": "shell",
-            "command": "yarn test:jest ${relativeFileDirname}/${fileBasenameNoExtension} --watch",
+            "command": "yarn test:jest ${relativeFileDirname}/${fileBasename} --watch",
             "problemMatcher": [],
             "label": "test: jest: watch curent file",
             "detail": "run jest tests in watch mode for current file",

mocks/txs/internalTxs.ts

+import type { InternalTransaction, InternalTransactionsResponse } from 'types/api/internalTransaction';
+
+export const base: InternalTransaction = {
+  block: 29611822,
+  created_contract: null,
+  error: null,
+  from: {
+    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: true,
+    name: 'ArianeeStore',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  gas_limit: '757586',
+  index: 1,
+  success: true,
+  timestamp: '2022-10-10T14:43:05.000000Z',
+  to: {
+    hash: '0x502a9C8af2441a1E276909405119FaE21F3dC421',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: true,
+    name: 'ArianeeCreditHistory',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  transaction_hash: '0xe9e27dfeb183066e26cfe556f74b7219b08df6951e25d14003d4fc7af8bbff61',
+  type: 'call',
+  value: '42000000000000000000',
+};
+
+export const typeStaticCall: InternalTransaction = {
+  ...base,
+  type: 'staticcall',
+  to: {
+    ...base.to,
+    name: null,
+  },
+  gas_limit: '63424243',
+};
+
+export const withContractCreated: InternalTransaction = {
+  ...base,
+  type: 'delegatecall',
+  to: null,
+  from: {
+    ...base.from,
+    name: null,
+  },
+  created_contract: {
+    hash: '0xdda21946FF3FAa027104b15BE6970CA756439F5a',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: null,
+    name: 'Shavuha token',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  value: '1420000000000000000',
+  gas_limit: '5433',
+};
+
+export const baseResponse: InternalTransactionsResponse = {
+  items: [
+    base,
+    typeStaticCall,
+    withContractCreated,
+  ],
+  next_page_params: null,
+};

types/api/internalTransaction.ts

@@ -32,5 +32,5 @@ export interface InternalTransactionsResponse {
     items_count: number;
     transaction_hash: string;
     transaction_index: number;
-  };
+  } | null;
 }

ui/tx/TxInternals.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as internalTxsMock from 'mocks/txs/internalTxs';
+import * as txMock from 'mocks/txs/tx';
+import TestApp from 'playwright/TestApp';
+
+import TxInternals from './TxInternals';
+
+const TX_HASH = txMock.base.hash;
+const API_URL_TX = `/node-api/transactions/${ TX_HASH }`;
+const API_URL_TX_INTERNALS = `/node-api/transactions/${ TX_HASH }/internal-transactions`;
+const hooksConfig = {
+  router: {
+    query: { id: TX_HASH },
+  },
+};
+
+test('base view +@mobile', async({ mount, page }) => {
+  await page.route(API_URL_TX, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.base),
+  }));
+  await page.route(API_URL_TX_INTERNALS, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(internalTxsMock.baseResponse),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxInternals/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.waitForResponse(API_URL_TX),
+  await page.waitForResponse(API_URL_TX_INTERNALS),
+
+  await expect(component).toHaveScreenshot();
+});

ui/tx/internals/TxInternalsListItem.tsx

@@ -38,7 +38,9 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
       </Box>
       <HStack spacing={ 3 }>
         <Text fontSize="sm" fontWeight={ 500 }>Value { appConfig.network.currency.symbol }</Text>
-        <Text fontSize="sm" variant="secondary">{ value }</Text>
+        <Text fontSize="sm" variant="secondary">
+          { BigNumber(value).div(BigNumber(10 ** appConfig.network.currency.decimals)).toFormat() }
+        </Text>
       </HStack>
       <HStack spacing={ 3 }>
         <Text fontSize="sm" fontWeight={ 500 }>Gas limit</Text>

ui/tx/internals/TxInternalsTableItem.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
+import appConfig from 'configs/app/config';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -45,7 +46,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
         </Address>
       </Td>
       <Td isNumeric verticalAlign="middle">
-        { value }
+        { BigNumber(value).div(BigNumber(10 ** appConfig.network.currency.decimals)).toFormat() }
       </Td>
       <Td isNumeric verticalAlign="middle">
         { BigNumber(gasLimit).toFormat() }