TokenSnippet and TokenTransfer tests

mocks/tokens/tokenTransfer.ts

-import type { TokenTransfer } from 'types/api/tokenTransfer';
+import type { TokenTransfer, TokenTransferResponse } from 'types/api/tokenTransfer';
 
 export const erc20: TokenTransfer = {
   from: {
@@ -126,3 +126,13 @@ export const erc1155multiple: TokenTransfer = {
     { token_id: '1000006457499', value: '11', decimals: null },
   ],
 };
+
+export const mixTokens: TokenTransferResponse = {
+  items: [
+    erc20,
+    erc721,
+    erc1155,
+    erc1155multiple,
+  ],
+  next_page_params: null,
+};

mocks/txs/tx.ts

@@ -13,16 +13,7 @@ export const base: Transaction = {
     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: [],
-  },
+  created_contract: null,
   decoded_input: decodedInputDataMock.withoutIndexedFields,
   exchange_rate: '0.00254428',
   fee: {
@@ -139,7 +130,6 @@ export const withRawRevertReason: Transaction = {
   result: 'Reverted',
   revert_reason: {
     raw: '4f6e6c79206368616972706572736f6e2063616e206769766520726967687420746f20766f74652e',
-    decoded: '', // FIXME api has been changed
   },
   to: {
     hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',

playwright/index.ts

@@ -3,11 +3,15 @@ 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;
+  router.useRouter = () => hooksConfig?.router || NEXT_ROUTER_MOCK;
 
   // set current date
   MockDate.set('2022-11-11');

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/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;

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;