Merge branch 'main' of github.com:blockscout/frontend into api-changes

.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 },

.gitignore

@@ -47,3 +47,5 @@ yarn-error.log*
 /test-results/
 /playwright-report/
 /playwright/.cache/
+/playwright/.browser/
+/playwright/envs.js

.vscode/tasks.json

@@ -102,15 +102,56 @@
                 "instanceLimit": 1
             }
         },
+
+        // PW TESTS
         {
-            "type": "npm",
-            "script": "test:pw:docker",
+            "type": "shell",
+            "command": "${input:pwDebugFlag} yarn test:pw:local ${relativeFileDirname}/${fileBasename} ${input:pwArgs}",
             "problemMatcher": [],
-            "label": "test: playwright",
+            "label": "test: playwright: local for current file",
+            "detail": "run visual components tests for current file",
+            "presentation": {
+                "reveal": "always",
+                "panel": "new",
+                "focus": true,
+            },
+            "icon": {
+                "color": "terminal.ansiBlue",
+                "id": "beaker"
+            },
+            "runOptions": {
+                "instanceLimit": 1
+            },
+        },
+        {
+            "type": "shell",
+            "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",
+            "presentation": {
+                "reveal": "always",
+                "panel": "new",
+                "focus": true,
+            },
+            "icon": {
+                "color": "terminal.ansiBlue",
+                "id": "beaker"
+            },
+            "runOptions": {
+                "instanceLimit": 1
+            },
+        },
+        {
+            "type": "shell",
+            "command": "yarn test:pw:docker ${input:pwArgs}",
+            "problemMatcher": [],
+            "label": "test: playwright: docker for all files",
             "detail": "run visual components tests",
             "presentation": {
                 "reveal": "always",
                 "panel": "new",
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiBlue",
@@ -120,6 +161,8 @@
                 "instanceLimit": 1
             }
         },
+
+        // JEST TESTS
         {
             "type": "npm",
             "script": "test:jest",
@@ -129,6 +172,7 @@
             "presentation": {
                 "reveal": "always",
                 "panel": "new",
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiBlue",
@@ -148,6 +192,7 @@
                 "reveal": "always",
                 "panel": "new",
                 "close": true,
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiBlue",
@@ -157,6 +202,26 @@
                 "instanceLimit": 1
             }
         },
+        {
+            "type": "shell",
+            "command": "yarn test:jest ${relativeFileDirname}/${fileBasename} --watch",
+            "problemMatcher": [],
+            "label": "test: jest: watch curent file",
+            "detail": "run jest tests in watch mode for current file",
+            "presentation": {
+                "reveal": "always",
+                "panel": "new",
+                "focus": true,
+            },
+            "icon": {
+                "color": "terminal.ansiBlue",
+                "id": "beaker"
+            },
+            "runOptions": {
+                "instanceLimit": 1
+            },
+        },
+
         {
             "type": "npm",
             "script": "build:docker",
@@ -168,6 +233,7 @@
                 "panel": "new",
                 "close": true,
                 "revealProblems": "onProblem",
+                "focus": true,
             },
             "icon": {
                 "color": "terminal.ansiRed",
@@ -217,5 +283,29 @@
                 "instanceLimit": 1
             }
         },
-    ]
+    ],
+    "inputs": [
+        {
+            "type": "pickString",
+            "id": "pwDebugFlag",
+            "description": "What debug flag you want to use?",
+            "options": [
+              "",
+              "PWDEBUG=1",
+              "DEBUG=pw:browser,pw:api",
+              "DEBUG=*",
+            ],
+            "default": ""
+        },
+        {
+            "type": "pickString",
+            "id": "pwArgs",
+            "description": "What args you want to pass?",
+            "options": [
+              "",
+              "--update-snapshots",
+            ],
+            "default": ""
+        },
+    ],
 }
\ No newline at end of file

configs/envs/.env.pw

+# app config
+NEXT_PUBLIC_APP_HOST=blockscout.com
+NEXT_PUBLIC_APP_INSTANCE=pw
+NEXT_PUBLIC_APP_ENV=testing
+
+# ui config
+NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
+NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
+NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
+
+# api config
+NEXT_PUBLIC_API_HOST=blockscout.com

configs/nextjs/redirects.js

-const PATHS = require('../../lib/link/paths');
+const PATHS = require('../../lib/link/paths.json');
 
 const oldUrls = [
   {

deploy/values/review/values.yaml

@@ -124,7 +124,7 @@ postgres:
   command: '["docker-entrypoint.sh", "-c"]'
   args: '["max_connections=300"]'
 
-  persistence: true
+  # persistence: true
 
   resources:
     limits:

jest.config.ts

@@ -95,7 +95,9 @@ const config: JestConfigWithTsJest = {
   // moduleNameMapper: {},
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
-  // modulePathIgnorePatterns: [],
+  modulePathIgnorePatterns: [
+    'node_modules_linux',
+  ],
 
   // Activates notifications for test results
   // notify: false,

lib/link/paths.js

-const paths = {
-  network_index: `/`,
-  watchlist: `/account/watchlist`,
-  private_tags: `/account/tag_address`,
-  public_tags: `/account/public_tags_request`,
-  api_keys: `/account/api_key`,
-  custom_abi: `/account/custom_abi`,
-  profile: `/auth/profile`,
-  txs: `/txs`,
-  tx: `/tx/:id`,
-  blocks: `/blocks`,
-  block: `/block/:id`,
-  tokens: `/tokens`,
-  token_index: `/token/:hash`,
-  token_instance_item: `/token/:hash/instance/:id`,
-  address_index: `/address/:id`,
-  address_contract_verification: `/address/:id/contract_verifications/new`,
-  apps: `/apps`,
-  app_index: `/apps/:id`,
-  search_results: `/search-results`,
-  other: `/search-results`,
-  auth: `/auth/auth0`,
-  stats: '/stats',
-};
-
-module.exports = paths;

lib/link/paths.json

+{
+  "network_index": "/",
+  "watchlist": "/account/watchlist",
+  "private_tags": "/account/tag_address",
+  "public_tags": "/account/public_tags_request",
+  "api_keys": "/account/api_key",
+  "custom_abi": "/account/custom_abi",
+  "profile": "/auth/profile",
+  "txs": "/txs",
+  "tx": "/tx/:id",
+  "blocks": "/blocks",
+  "block": "/block/:id",
+  "tokens": "/tokens",
+  "token_index": "/token/:hash",
+  "token_instance_item": "/token/:hash/instance/:id",
+  "address_index": "/address/:id",
+  "address_contract_verification": "/address/:id/contract_verifications/new",
+  "apps": "/apps",
+  "app_index": "/apps/:id",
+  "search_results": "/search-results",
+  "other": "/search-results",
+  "auth": "/auth/auth0",
+  "stats": "/stats"
+}

lib/link/routes.ts

 import appConfig from 'configs/app/config';
 
-import PATHS from './paths.js';
+import PATHS from './paths.json';
 
 export interface Route {
   pattern: string;

mocks/address/address.ts

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

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/blocks/block.ts

+import type { Block, BlocksResponse } from 'types/api/block';
+
+export const base: Block = {
+  base_fee_per_gas: '10000000000',
+  burnt_fees: '5449200000000000',
+  burnt_fees_percentage: 20.292245650793845,
+  difficulty: '340282366920938463463374607431768211454',
+  extra_data: 'TODO',
+  gas_limit: '12500000',
+  gas_target_percentage: -91.28128,
+  gas_used: '544920',
+  gas_used_percentage: 4.35936,
+  hash: '0xccc75136de485434d578b73df66537c06b34c3c9b12d085daf95890c914fc2bc',
+  height: 30146364,
+  miner: {
+    hash: '0xdAd49e6CbDE849353ab27DeC6319E687BFc91A41',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: null,
+    name: 'Alex Emelyanov',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  nonce: '0x0000000000000000',
+  parent_hash: '0x44125f0eb36a9d942e0c23bb4e8117f7ba86a9537a69b59c0025986ed2b7500f',
+  priority_fee: '23211757500000000',
+  rewards: [
+    {
+      reward: '500000000000000000',
+      type: 'POA Mania Reward',
+    },
+    {
+      reward: '1026853607500000000',
+      type: 'Validator Reward',
+    },
+    {
+      reward: '500000000000000000',
+      type: 'Emission Reward',
+    },
+  ],
+  size: 2448,
+  state_root: 'TODO',
+  timestamp: '2022-11-11T11:59:35Z',
+  total_difficulty: '10258276095980170141167591583995189665817672619',
+  tx_count: 5,
+  tx_fees: '26853607500000000',
+  type: 'block',
+  uncles_hashes: [],
+};
+
+export const genesis = {
+  base_fee_per_gas: null,
+  burnt_fees: null,
+  burnt_fees_percentage: null,
+  difficulty: '131072',
+  extra_data: 'TODO',
+  gas_limit: '6700000',
+  gas_target_percentage: -100,
+  gas_used: '0',
+  gas_used_percentage: 0,
+  hash: '0x39f02c003dde5b073b3f6e1700fc0b84b4877f6839bb23edadd3d2d82a488634',
+  height: 0,
+  miner: {
+    hash: '0x0000000000000000000000000000000000000000',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: null,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  nonce: '0x0000000000000000',
+  parent_hash: '0x0000000000000000000000000000000000000000000000000000000000000000',
+  priority_fee: null,
+  rewards: [],
+  size: 533,
+  state_root: 'TODO',
+  timestamp: '2017-12-16T00:13:24.000000Z',
+  total_difficulty: '131072',
+  tx_count: 0,
+  tx_fees: '0',
+  type: 'block',
+  uncles_hashes: [],
+};
+
+export const base2: Block = {
+  ...base,
+  height: base.height - 1,
+  size: 592,
+  miner: {
+    hash: '0xDfE10D55d9248B2ED66f1647df0b0A46dEb25165',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: null,
+    name: 'Kiryl Ihnatsyeu',
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  timestamp: '2022-11-11T11:46:05Z',
+  tx_count: 253,
+  gas_target_percentage: 23.6433,
+  gas_used: '6333342',
+  gas_used_percentage: 87.859504,
+  burnt_fees: '232438000000000000',
+  burnt_fees_percentage: 65.3333333333334,
+  rewards: [
+    {
+      reward: '500000000000000000',
+      type: 'Chore Reward',
+    },
+    {
+      reward: '1017432850000000000',
+      type: 'Miner Reward',
+    },
+    {
+      reward: '500000000000000000',
+      type: 'Emission Reward',
+    },
+  ],
+};
+
+export const baseListResponse: BlocksResponse = {
+  items: [
+    base,
+    base2,
+  ],
+  next_page_params: null,
+};

mocks/tokens/tokenTransfer.ts

+import type { TokenTransfer, TokenTransferResponse } 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 },
+  ],
+};
+
+export const mixTokens: TokenTransferResponse = {
+  items: [
+    erc20,
+    erc721,
+    erc1155,
+    erc1155multiple,
+  ],
+  next_page_params: null,
+};

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',
+    },
+  ],
+};

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,
+};

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: null,
+  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',
+  },
+  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',
+};

package.json

@@ -21,7 +21,8 @@
     "lint:tsc": "./node_modules/.bin/tsc -p ./tsconfig.json",
     "prepare": "husky install",
     "format-svg": "./node_modules/.bin/svgo -r ./icons",
-    "test:pw": "playwright test -c playwright-ct.config.ts",
+    "test:pw": "./playwright/make-envs-script.sh && playwright test -c playwright-ct.config.ts",
+    "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
     "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.28.0-focal ./playwright/run-tests.sh",
     "test:jest": "jest",
     "test:jest:watch": "jest --watch"
@@ -84,6 +85,7 @@
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
     "typescript": "4.7.2",
+    "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.5.2"
   },
   "lint-staged": {

pages/_app.tsx

@@ -9,7 +9,7 @@ import { Chakra } from 'lib/Chakra';
 import useConfigSentry from 'lib/hooks/useConfigSentry';
 import type { ErrorType } from 'lib/hooks/useFetch';
 import theme from 'theme';
-import AppError from 'ui/shared/AppError';
+import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
 function MyApp({ Component, pageProps }: AppProps) {

pages/_error.tsx

@@ -27,7 +27,7 @@ import * as cookies from 'lib/cookies';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import type { Props as ServerSidePropsCommon } from 'lib/next/getServerSideProps';
 import { getServerSideProps as getServerSidePropsCommon } from 'lib/next/getServerSideProps';
-import AppError from 'ui/shared/AppError';
+import AppError from 'ui/shared/AppError/AppError';
 import Page from 'ui/shared/Page/Page';
 
 type Props = ServerSidePropsCommon & {

playwright-ct.config.ts

 import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
 import { devices } from '@playwright/experimental-ct-react';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 /**
@@ -10,7 +12,7 @@ const config: PlaywrightTestConfig = {
 
   testMatch: /.*\.pw\.tsx/,
 
-  snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshots__/{testFileName}_{arg}{ext}',
+  snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshots__/{testFileName}_{projectName}_{arg}{ext}',
 
   /* Maximum time one test can run for. */
   timeout: 10 * 1000,
@@ -42,15 +44,49 @@ const config: PlaywrightTestConfig = {
     headless: true,
 
     ctViteConfig: {
-      plugins: [ tsconfigPaths() ],
+      plugins: [
+        tsconfigPaths(),
+        react(),
+        svgr({
+          exportAsDefault: true,
+        }),
+      ],
     },
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: devices['Desktop Chrome'],
+      name: 'default',
+      grepInvert: /-@default/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1200, height: 750 },
+      },
+    },
+    {
+      name: 'mobile',
+      grep: /\+@mobile/,
+      use: {
+        ...devices['iPhone 13 Pro'],
+      },
+    },
+    {
+      name: 'desktop xl',
+      grep: /\+@desktop-xl/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1600, height: 1000 },
+      },
+    },
+    {
+      name: 'dark color mode',
+      grep: /\+@dark-mode/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1200, height: 750 },
+        colorScheme: 'dark',
+      },
     },
   ],
 };

playwright/RenderWithChakra.tsx

-import { ChakraProvider } from '@chakra-ui/react';
-import type { ColorMode } from '@chakra-ui/react';
-import React from 'react';
-
-import theme from 'theme';
-
-type Props = {
-  children: React.ReactNode;
-  colorMode?: ColorMode;
-}
-
-const RenderWithChakra = ({ children, colorMode = 'light' }: Props) => {
-  return (
-    <ChakraProvider theme={{ ...theme, config: { ...theme.config, initialColorMode: colorMode } }}>
-      { children }
-    </ChakraProvider>
-  );
-};
-
-export default RenderWithChakra;

playwright/TestApp.tsx

+import { ChakraProvider } from '@chakra-ui/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+
+import theme from 'theme';
+
+type Props = {
+  children: React.ReactNode;
+}
+
+const TestApp = ({ children }: Props) => {
+  const [ queryClient ] = React.useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: 0,
+      },
+    },
+  }));
+
+  return (
+    <ChakraProvider theme={ theme }>
+      <QueryClientProvider client={ queryClient }>
+        { children }
+      </QueryClientProvider>
+    </ChakraProvider>
+  );
+};
+
+export default TestApp;

playwright/index.html

@@ -7,6 +7,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/playwright/envs.js"></script>
     <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>

playwright/index.ts

-// Import styles, initialize component theme here.
-// import '../src/common.css';
+import './fonts.css';
+import { beforeMount } from '@playwright/experimental-ct-react/hooks';
+import MockDate from 'mockdate';
+import * as router from 'next/router';
+
+const NEXT_ROUTER_MOCK = {
+  query: {},
+};
+
+beforeMount(async({ hooksConfig }) => {
+  // Before mount, redefine useRouter to return mock value from test.
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore: I really want to redefine this property :)
+  router.useRouter = () => hooksConfig?.router || NEXT_ROUTER_MOCK;
+
+  // set current date
+  MockDate.set('2022-11-11T12:00:00Z');
+});
 
 export {};

playwright/make-envs-script.sh

+#!/bin/bash
+
+targetFile='./playwright/envs.js'
+
+declare -a envFiles=('./configs/envs/.env.pw' './configs/envs/.env.poa_core')
+
+touch $targetFile;
+truncate -s 0 $targetFile;
+
+echo "Creating script file with envs"
+
+echo "window.process = { env: { } };" >> $targetFile;
+
+for envFile in "${envFiles[@]}"
+do
+    # read each env file
+    while read line; do
+        # if it is a comment or an empty line, continue to next one
+        if [ "${line:0:1}" == "#" ] || [ "${line}" == "" ]; then
+            continue
+        fi
+
+        # split by "=" sign to get variable name and value
+        configName="$(cut -d'=' -f1 <<<"$line")";
+        configValue="$(cut -d'=' -f2- <<<"$line")";
+
+        # if there is a value, escape it and add line to target file
+        if [ -n "$configValue" ]; then
+            escapedConfigValue=$(echo $configValue | sed s/\'/\"/g);
+            echo "window.process.env.${configName} = '${escapedConfigValue}';" >> $targetFile;
+        fi
+    done < $envFile
+done
+
+echo "Done"
\ No newline at end of file

playwright/run-tests.sh

 #!/bin/sh
-yarn install
-yarn test:pw
+yarn install --modules-folder node_modules_linux
+export NODE_PATH=$(pwd)/node_modules_linux
\ No newline at end of file
+rm -rf ./playwright/.cache
+yarn test:pw "$@"
\ No newline at end of file

types/api/addressParams.ts

@@ -11,9 +11,10 @@ export interface WatchlistName {
 
 export interface AddressParam {
   hash: string;
-  implementation_name: string;
+  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/block.ts

@@ -16,10 +16,10 @@ export interface Block {
   total_difficulty: string;
   gas_used: string | null;
   gas_limit: string;
-  nonce: number;
-  base_fee_per_gas: number | null;
-  burnt_fees: number | null;
-  priority_fee: number | null;
+  nonce: string;
+  base_fee_per_gas: string | null;
+  burnt_fees: string | null;
+  priority_fee: string | null;
   extra_data: string | null;
   state_root: string | null;
   rewards?: Array<Reward>;

types/api/internalTransaction.ts

@@ -32,5 +32,5 @@ export interface InternalTransactionsResponse {
     items_count: number;
     transaction_hash: string;
     transaction_index: number;
-  };
+  } | 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;

types/api/reward.ts

 export interface Reward {
   reward: string;
-  type: 'Miner Reward' | 'Validator Reward' | 'Emission Reward' | 'Chore Reward' | 'Uncle Reward';
+  type: 'Miner Reward' | 'Validator Reward' | 'Emission Reward' | 'Chore Reward' | 'Uncle Reward' | 'POA Mania Reward';
 }

types/api/transaction.ts

@@ -27,17 +27,17 @@ export type Transaction = (
   from: 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/apps/AppModal.tsx

@@ -13,6 +13,7 @@ import tgIcon from 'icons/social/telega.svg';
 import twIcon from 'icons/social/tweet.svg';
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
 import notEmpty from 'lib/notEmpty';
 
@@ -65,11 +66,13 @@ const AppModal = ({
     onFavoriteClick(id, isFavorite);
   }, [ onFavoriteClick, id, isFavorite ]);
 
+  const isMobile = useIsMobile();
+
   return (
     <Modal
       isOpen={ Boolean(id) }
       onClose={ onClose }
-      size={{ base: 'full', lg: 'md' }}
+      size={ isMobile ? 'full' : 'md' }
       isCentered
     >
       <ModalOverlay/>

ui/block/BlockDetails.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as blockMock from 'mocks/blocks/block';
+import TestApp from 'playwright/TestApp';
+
+import BlockDetails from './BlockDetails';
+
+const API_URL = '/node-api/blocks/1';
+const hooksConfig = {
+  router: {
+    query: { id: 1 },
+  },
+};
+
+test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(blockMock.base),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <BlockDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.waitForResponse(API_URL),
+  await page.getByText('View details').click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('genesis block', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(blockMock.genesis),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <BlockDetails/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.waitForResponse(API_URL),
+  await page.getByText('View details').click();
+
+  await expect(component).toHaveScreenshot();
+});

ui/block/BlockDetails.tsx

@@ -228,7 +228,7 @@ const BlockDetails = () => {
           </Tooltip>
         ) }
       </DetailsInfoItem>
-      { data.priority_fee !== null && data.priority_fee > 0 && (
+      { data.priority_fee !== null && BigNumber(data.priority_fee).gt(ZERO) && (
         <DetailsInfoItem
           title="Priority fee / Tip"
           hint="User-defined tips sent to validator for transaction priority/inclusion."

ui/blocks/BlocksContent.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as blockMock from 'mocks/blocks/block';
+import TestApp from 'playwright/TestApp';
+
+import BlocksContent from './BlocksContent';
+
+const API_URL = '/node-api/blocks';
+
+test('base view +@mobile', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(blockMock.baseListResponse),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <BlocksContent/>
+    </TestApp>,
+  );
+
+  await page.waitForResponse(API_URL),
+
+  await expect(component).toHaveScreenshot();
+});

ui/home/LatestBlocks.tsx

@@ -111,7 +111,7 @@ const LatestBlocks = () => {
 
   return (
     <>
-      <Heading as="h4" fontSize="18px" mb={{ base: 3, lg: 8 }}>Latest Blocks</Heading>
+      <Heading as="h4" size="sm" mb={{ base: 4, lg: 7 }}>Latest Blocks</Heading>
       { content }
     </>
   );

ui/home/LatestTxs.tsx

@@ -54,7 +54,7 @@ const LatestTransactions = () => {
 
   return (
     <>
-      <Heading as="h4" fontSize="18px" mb={{ base: 3, lg: 8 }}>Latest transactions</Heading>
+      <Heading as="h4" size="sm" mb={ 4 }>Latest transactions</Heading>
       { content }
     </>
   );

ui/shared/AccountPageDescription.tsx

@@ -26,7 +26,8 @@ const AccountPageDescription = ({ children }: {children: React.ReactNode}) => {
     return function cleanup() {
       window.removeEventListener('resize', resizeHandler);
     };
-  }, [ calculateCut ]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ ]);
 
   const expand = useCallback(() => {
     setExpanded(true);

ui/shared/AppError/AppError.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import AppError from './AppError';
+
+test.use({ viewport: { width: 900, height: 400 } });
+
+test('status code 404', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <AppError statusCode={ 404 }/>
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('status code 500', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <AppError statusCode={ 500 }/>
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
+});

ui/shared/DeleteModal.tsx

@@ -12,6 +12,7 @@ import {
 import { useMutation } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import FormSubmitAlert from 'ui/shared/FormSubmitAlert';
 
 type Props = {
@@ -53,8 +54,10 @@ const DeleteModal: React.FC<Props> = ({
     mutation.mutate();
   }, [ setAlertVisible, mutation ]);
 
+  const isMobile = useIsMobile();
+
   return (
-    <Modal isOpen={ isOpen } onClose={ onModalClose } size={{ base: 'full', lg: 'md' }}>
+    <Modal isOpen={ isOpen } onClose={ onModalClose } size={ isMobile ? 'full' : 'md' }>
       <ModalOverlay/>
       <ModalContent>
         <ModalHeader fontWeight="500" textStyle="h3">{ title }</ModalHeader>

ui/shared/Page/Page.tsx

@@ -10,7 +10,7 @@ import useFetch from 'lib/hooks/useFetch';
 import useScrollDirection from 'lib/hooks/useScrollDirection';
 import { SocketProvider } from 'lib/socket/context';
 import ScrollDirectionContext from 'ui/ScrollDirectionContext';
-import AppError from 'ui/shared/AppError';
+import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 import PageContent from 'ui/shared/Page/PageContent';
 import Header from 'ui/snippets/header/Header';

ui/shared/Page/PageContent.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 interface Props {
   children: React.ReactNode;
-  hasSearch: boolean;
+  hasSearch?: boolean;
 }
 
 const PageContent = ({ children, hasSearch }: Props) => {

ui/shared/TokenSnippet/TokenSnippet.pw.tsx

+import { test, expect, devices } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import TokenSnippet from './TokenSnippet';
+
+const API_URL = 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/poa/assets/0x363574E6C5C71c343d7348093D84320c76d5Dd29/logo.png';
+
+test.use(devices['iPhone 13 Pro']);
+
+test('unnamed', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TokenSnippet hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29" symbol="xDAI"/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('named', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TokenSnippet hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29" name="Shavuha token" symbol="SHA"/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with logo', async({ mount, page }) => {
+  await page.route(API_URL, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/image_s.jpg',
+    });
+  });
+
+  const component = await mount(
+    <TestApp>
+      <TokenSnippet hash="0x363574E6C5C71c343d7348093D84320c76d5Dd29"/>
+    </TestApp>,
+  );
+
+  await page.waitForResponse(API_URL),
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/TokenTransfer/TokenTransfer.pw.tsx

+import { Box } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { QueryKeys } from 'types/client/queries';
+
+import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
+import TestApp from 'playwright/TestApp';
+
+import TokenTransfer from './TokenTransfer';
+
+const API_URL = '/node-api/transactions/1/token-transfers';
+
+test('without tx info +@mobile', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(tokenTransferMock.mixTokens),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <Box h={{ base: '134px', lg: 6 }}/>
+      <TokenTransfer
+        path={ API_URL }
+        queryName={ QueryKeys.txTokenTransfers }
+        showTxInfo={ false }
+      />
+    </TestApp>,
+  );
+
+  await page.waitForResponse(API_URL),
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -11,7 +11,7 @@ import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
-import TokenSnippet from 'ui/shared/TokenSnippet';
+import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -9,7 +9,7 @@ import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
-import TokenSnippet from 'ui/shared/TokenSnippet';
+import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 
@@ -18,7 +18,7 @@ type Props = TokenTransfer & {
   showTxInfo?: boolean;
 }
 
-const TxInternalTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddress, showTxInfo, type }: Props) => {
+const TokenTransferTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddress, showTxInfo, type }: Props) => {
   const value = (() => {
     if (!('value' in total)) {
       return '-';
@@ -75,4 +75,4 @@ const TxInternalTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddr
   );
 };
 
-export default React.memo(TxInternalTableItem);
+export default React.memo(TokenTransferTableItem);

ui/shared/Utilization/Utilization.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 
 import Utilization from './Utilization';
 
 test.use({ viewport: { width: 100, height: 50 } });
 
-test('green color scheme in light mode', async({ mount }) => {
+test('green color scheme +@dark-mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <Utilization value={ 0.423 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('green color scheme in dark mode', async({ mount }) => {
+test('gray color scheme +@dark-mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra colorMode="dark">
-      <Utilization value={ 0.423 }/>
-    </RenderWithChakra>,
-  );
-  await expect(component).toHaveScreenshot();
-});
-
-test('gray color scheme in light mode', async({ mount }) => {
-  const component = await mount(
-    <RenderWithChakra>
-      <Utilization value={ 0.423 } colorScheme="gray"/>
-    </RenderWithChakra>,
-  );
-  await expect(component).toHaveScreenshot();
-});
-
-test('gray color scheme in dark mode', async({ mount }) => {
-  const component = await mount(
-    <RenderWithChakra colorMode="dark">
+    <TestApp>
       <Utilization value={ 0.423 } colorScheme="gray"/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });

ui/tx/NftTokenTransferSnippet.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import nftIcon from 'icons/nft_shield.svg';
 import link from 'lib/link/link';
 import AddressLink from 'ui/shared/address/AddressLink';
-import TokenSnippet from 'ui/shared/TokenSnippet';
+import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 
 interface Props {
   value: string;
@@ -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/TxDecodedInputData/TxDecodedInputData.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as mocks from 'mocks/txs/decodedInputData';
+import TestApp from 'playwright/TestApp';
+
+import TxDecodedInputData from './TxDecodedInputData';
+
+test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TxDecodedInputData data={ mocks.withIndexedFields }/>
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('without indexed fields +@mobile', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
+    </TestApp>,
+  );
+  await expect(component).toHaveScreenshot();
+});

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

@@ -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';
 
@@ -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/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/details/TxDetailsTokenTransfer.tsx

@@ -7,7 +7,7 @@ import rightArrowIcon from 'icons/arrows/east.svg';
 import { space } from 'lib/html-entities';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CurrencyValue from 'ui/shared/CurrencyValue';
-import TokenSnippet from 'ui/shared/TokenSnippet';
+import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
 
 type Props = TTokenTransfer;
@@ -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 }

ui/tx/details/TxRevertReason.tsx

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