TxDetails tests

mocks/address/address.ts

@@ -4,6 +4,7 @@ export const withName: AddressParam = {
   hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
   implementation_name: null,
   is_contract: true,
+  is_verified: null,
   name: 'ArianeeStore',
   private_tags: [],
   watchlist_names: [],
@@ -14,6 +15,7 @@ export const withoutName: AddressParam = {
   hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
   implementation_name: null,
   is_contract: true,
+  is_verified: null,
   name: null,
   private_tags: [],
   watchlist_names: [],

mocks/address/tag.ts

+import type { AddressTag, WatchlistName } from 'types/api/addressParams';
+
+export const privateTag: AddressTag = {
+  label: 'my-private-tag',
+  display_name: 'my private tag',
+  address_hash: '0x',
+};
+
+export const publicTag: AddressTag = {
+  label: 'some-public-tag',
+  display_name: 'some public tag',
+  address_hash: '0x',
+};
+
+export const watchlistName: WatchlistName = {
+  label: 'watchlist-name',
+  display_name: 'watchlist name',
+};

mocks/tokens/tokenTransfer.ts

+import type { TokenTransfer } from 'types/api/tokenTransfer';
+
+export const erc20: TokenTransfer = {
+  from: {
+    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: true,
+    name: 'ArianeeStore',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  to: {
+    hash: '0x7d20a8D54F955b4483A66aB335635ab66e151c51',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  token: {
+    address: '0x55d536e4d6c1993d8ef2e2a4ef77f02088419420',
+    decimals: '18',
+    exchange_rate: null,
+    holders: '46554',
+    name: 'ARIANEE',
+    symbol: 'ARIA',
+    type: 'ERC-20',
+  },
+  total: {
+    decimals: '18',
+    value: '31567373703130350',
+  },
+  tx_hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
+  type: 'token_transfer',
+};
+
+export const erc721: TokenTransfer = {
+  from: {
+    hash: '0x621C2a125ec4A6D8A7C7A655A18a2868d35eb43C',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  to: {
+    hash: '0x47eE48AEBc4ab9Ed908b805b8c8dAAa71B31Db1A',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  token: {
+    address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    decimals: null,
+    exchange_rate: null,
+    holders: '63090',
+    name: 'Arianee Smart-Asset',
+    symbol: 'AriaSA',
+    type: 'ERC-721',
+  },
+  total: {
+    token_id: '875879856',
+  },
+  tx_hash: '0xf13bc7afe5e02b494dd2f22078381d36a4800ef94a0ccc147431db56c301e6cc',
+  type: 'token_transfer',
+};
+
+export const erc1155: TokenTransfer = {
+  from: {
+    hash: '0x0000000000000000000000000000000000000000',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  to: {
+    hash: '0xBb36c792B9B45Aaf8b848A1392B0d6559202729E',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  token: {
+    address: '0xF56b7693E4212C584de4a83117f805B8E89224CB',
+    decimals: null,
+    exchange_rate: null,
+    holders: '1',
+    name: null,
+    symbol: null,
+    type: 'ERC-1155',
+  },
+  total: {
+    token_id: '123',
+    value: '42',
+    decimals: null,
+  },
+  tx_hash: '0x05d6589367633c032d757a69c5fb16c0e33e3994b0d9d1483f82aeee1f05d746',
+  type: 'token_minting',
+};
+
+export const erc1155multiple: TokenTransfer = {
+  ...erc1155,
+  token: {
+    ...erc1155.token,
+    name: 'OLYMPIC',
+  },
+  total: [
+    { token_id: '456', value: '42', decimals: null },
+    { token_id: '12345678', value: '142', decimals: null },
+    { token_id: '1000006457499', value: '11', decimals: null },
+  ],
+};

mocks/txs/tx.ts

+/* eslint-disable max-len */
+import type { Transaction } from 'types/api/transaction';
+
+import { publicTag, privateTag, watchlistName } from 'mocks/address/tag';
+import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
+import * as decodedInputDataMock from 'mocks/txs/decodedInputData';
+
+export const base: Transaction = {
+  base_fee_per_gas: '10000000000',
+  block: 29611750,
+  confirmation_duration: [
+    0,
+    6364,
+  ],
+  confirmations: 508299,
+  created_contract: {
+    hash: '', // FIXME currently backend sending null, but according to swagger there cannot be null in AddressParams model
+    implementation_name: null,
+    is_contract: false,
+    is_verified: null,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  decoded_input: decodedInputDataMock.withoutIndexedFields,
+  exchange_rate: '0.00254428',
+  fee: {
+    type: 'actual',
+    value: '7143168000000000',
+  },
+  from: {
+    hash: '0x047A81aFB05D9B1f8844bf60fcA05DCCFbC584B9',
+    implementation_name: null,
+    is_contract: false,
+    name: null,
+    is_verified: null,
+    private_tags: [ ],
+    public_tags: [ publicTag ],
+    watchlist_names: [],
+  },
+  gas_limit: '800000',
+  gas_price: '48000000000',
+  gas_used: '148816',
+  hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
+  max_fee_per_gas: '40190625000',
+  max_priority_fee_per_gas: '28190625000',
+  method: 'updateSmartAsset',
+  nonce: 27831,
+  position: 7,
+  priority_fee: '1299672384375000',
+  raw_input: '0xfa4b78b90000000000000000000000000000000000000000000000000000000005001bcfe835d1028984e9e6e7d016b77164eacbcc6cc061e9333c0b37982b504f7ea791000000000000000000000000a79b29ad7e0196c95b87f4663ded82fbf2e3add8',
+  result: 'success',
+  revert_reason: null,
+  status: 'ok',
+  timestamp: '2022-10-10T14:34:30.000000Z',
+  to: {
+    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: true,
+    name: null,
+    private_tags: [ privateTag ],
+    public_tags: [],
+    watchlist_names: [ watchlistName ],
+  },
+  token_transfers: [],
+  token_transfers_overflow: false,
+  tx_burnt_fee: '461030000000000',
+  tx_tag: null,
+  tx_types: [
+    'contract_call',
+    'token_transfer',
+  ],
+  type: 2,
+  value: '42000000000000000000',
+};
+
+export const withContractCreation: Transaction = {
+  ...base,
+  to: null,
+  created_contract: {
+    hash: '0xdda21946FF3FAa027104b15BE6970CA756439F5a',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: null,
+    name: 'Shavuha token',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+};
+
+export const withTokenTransfer: Transaction = {
+  ...base,
+  to: {
+    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: true,
+    name: 'ArianeeStore',
+    private_tags: [ privateTag ],
+    public_tags: [],
+    watchlist_names: [ watchlistName ],
+  },
+  token_transfers: [
+    tokenTransferMock.erc20,
+    tokenTransferMock.erc721,
+    tokenTransferMock.erc1155,
+    tokenTransferMock.erc1155multiple,
+  ],
+};
+
+export const withDecodedRevertReason: Transaction = {
+  ...base,
+  status: 'error',
+  result: 'Reverted',
+  revert_reason: {
+    method_call: 'SomeCustomError(address addr, uint256 balance)',
+    method_id: '50289a9f',
+    parameters: [
+      {
+        name: 'addr',
+        type: 'address',
+        value: '0xf26594f585de4eb0ae9de865d9053fee02ac6ef1',
+      },
+      {
+        name: 'balance',
+        type: 'uint256',
+        value: '123',
+      },
+    ],
+  },
+};
+
+export const withRawRevertReason: Transaction = {
+  ...base,
+  status: 'error',
+  result: 'Reverted',
+  revert_reason: {
+    raw: '4f6e6c79206368616972706572736f6e2063616e206769766520726967687420746f20766f74652e',
+    decoded: '', // FIXME api has been changed
+  },
+  to: {
+    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+    implementation_name: null,
+    is_verified: true,
+    is_contract: true,
+    name: 'Bad guy',
+    private_tags: [ ],
+    public_tags: [],
+    watchlist_names: [ ],
+  },
+};
+
+export const pending: Transaction = {
+  ...base,
+  base_fee_per_gas: null,
+  block: null,
+  confirmation_duration: [],
+  confirmations: 0,
+  decoded_input: null,
+  gas_used: null,
+  max_fee_per_gas: null,
+  max_priority_fee_per_gas: null,
+  method: null,
+  position: null,
+  priority_fee: null,
+  result: 'pending',
+  revert_reason: null,
+  status: null,
+  timestamp: null,
+  tx_burnt_fee: null,
+  tx_tag: null,
+  type: null,
+  value: '0',
+};

types/api/addressParams.ts

@@ -14,6 +14,7 @@ export interface AddressParam {
   implementation_name: string | null;
   name: string | null;
   is_contract: boolean;
+  is_verified: boolean | null;
   private_tags: Array<AddressTag> | null;
   watchlist_names: Array<WatchlistName> | null;
   public_tags: Array<AddressTag> | null;

types/api/transaction.ts

@@ -21,17 +21,17 @@ export interface Transaction {
   created_contract: AddressParam;
   value: string;
   fee: Fee;
-  gas_price: number;
-  type: number;
+  gas_price: string;
+  type: number | null;
   gas_used: string | null;
   gas_limit: string;
-  max_fee_per_gas: number | null;
-  max_priority_fee_per_gas: number | null;
-  priority_fee: number | null;
-  base_fee_per_gas: number | null;
-  tx_burnt_fee: number | null;
+  max_fee_per_gas: string | null;
+  max_priority_fee_per_gas: string | null;
+  priority_fee: string | null;
+  base_fee_per_gas: string | null;
+  tx_burnt_fee: string | null;
   nonce: number;
-  position: number;
+  position: number | null;
   revert_reason: TransactionRevertReason | null;
   raw_input: string;
   decoded_input: DecodedInput | null;

ui/tx/NftTokenTransferSnippet.tsx

@@ -26,7 +26,7 @@ const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props)
         <Link href={ url } fontWeight={ 600 }>{ tokenId }</Link>
       </Box>
       { name ? (
-        <TokenSnippet symbol={ symbol } hash={ hash } name={ name }/>
+        <TokenSnippet symbol={ symbol } hash={ hash } name={ name } w="auto"/>
       ) : (
         <AddressLink hash={ hash } truncation="constant" type="token"/>
       ) }

ui/tx/TxDetails.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as txMock from 'mocks/txs/tx';
+import TestApp from 'playwright/TestApp';
+
+import TxDetails from './TxDetails';
+
+const API_URL = '/node-api/transactions/1';
+const hooksConfig = {
+  router: {
+    query: { id: 1 },
+  },
+};
+
+test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.base),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.waitForResponse(API_URL),
+  await page.getByText('View details').click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('creating contact', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.withContractCreation),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+  await page.waitForResponse(API_URL);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with token transfer +@mobile', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.withTokenTransfer),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+  await page.waitForResponse(API_URL);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with decoded revert reason', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.withDecodedRevertReason),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+  await page.waitForResponse(API_URL);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with decoded raw reason', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.withRawRevertReason),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+  await page.waitForResponse(API_URL);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('pending', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txMock.pending),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+  await page.waitForResponse(API_URL);
+  await page.getByText('View details').click();
+
+  await expect(component).toHaveScreenshot();
+});

ui/tx/TxDetails.tsx

@@ -156,7 +156,7 @@ const TxDetails = () => {
             <CopyToClipboard text={ toAddress.hash }/>
           </Address>
         ) : (
-          <Flex width="100%" whiteSpace="pre">
+          <Flex width={{ base: '100%', lg: 'auto' }} whiteSpace="pre">
             <span>[Contract </span>
             <AddressLink hash={ toAddress.hash }/>
             <span> created]</span>

ui/tx/details/TxDetailsTokenTransfer.tsx

@@ -34,6 +34,7 @@ const TxDetailsTokenTransfer = ({ token, total, to, from }: Props) => {
         const payload = total as Erc721TotalPayload;
         return (
           <NftTokenTransferSnippet
+            name={ token.name }
             tokenId={ payload.token_id }
             value="1"
             hash={ token.address }
@@ -47,6 +48,7 @@ const TxDetailsTokenTransfer = ({ token, total, to, from }: Props) => {
         const items = Array.isArray(payload) ? payload : [ payload ];
         return items.map((item) => (
           <NftTokenTransferSnippet
+            name={ token.name }
             key={ item.token_id }
             tokenId={ item.token_id }
             value={ item.value }