tests for address details

mocks/address/address.ts

 import type { Address } from 'types/api/address';
 import type { AddressParam } from 'types/api/addressParams';
 
+import { publicTag, privateTag, watchlistName } from 'mocks/address/tag';
 import { tokenInfo } from 'mocks/tokens/tokenInfo';
 
+export const hash = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
+
 export const withName: AddressParam = {
-  hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+  hash: hash,
   implementation_name: null,
   is_contract: true,
   is_verified: null,
@@ -15,7 +18,7 @@ export const withName: AddressParam = {
 };
 
 export const withoutName: AddressParam = {
-  hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+  hash: hash,
   implementation_name: null,
   is_contract: true,
   is_verified: null,
@@ -25,8 +28,8 @@ export const withoutName: AddressParam = {
   public_tags: [],
 };
 
-export const withToken: Address = {
-  hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+export const token: Address = {
+  hash: hash,
   implementation_name: null,
   is_contract: true,
   is_verified: false,
@@ -37,8 +40,8 @@ export const withToken: Address = {
   token: tokenInfo,
   block_number_balance_updated_at: 8201413,
   coin_balance: '1',
-  creation_tx_hash: null,
-  creator_address_hash: null,
+  creation_tx_hash: '0xc38cf7377bf72d6436f63c37b01b24d032101f20ec1849286dc703c712f10c98',
+  creator_address_hash: '0x34A9c688512ebdB575e82C50c9803F6ba2916E72',
   exchange_rate: null,
   implementation_address: null,
   has_custom_methods_read: false,
@@ -49,7 +52,65 @@ export const withToken: Address = {
   has_methods_read_proxy: false,
   has_methods_write: false,
   has_methods_write_proxy: false,
-  has_token_transfers: false,
+  has_token_transfers: true,
   has_tokens: true,
   has_validated_blocks: false,
 };
+
+export const contract: Address = {
+  block_number_balance_updated_at: 30811263,
+  coin_balance: '27826501896887194214322205',
+  creation_tx_hash: '0xf2aff6501b632604c39978b47d309813d8a1bcca721864bbe86abf59704f195e',
+  creator_address_hash: '0x803ad3F50b9e1fF68615e8B053A186e1be288943',
+  exchange_rate: '0.04311',
+  has_custom_methods_read: false,
+  has_custom_methods_write: false,
+  has_decompiled_code: false,
+  has_logs: true,
+  has_methods_read: true,
+  has_methods_read_proxy: true,
+  has_methods_write: true,
+  has_methods_write_proxy: true,
+  has_token_transfers: false,
+  has_tokens: false,
+  has_validated_blocks: false,
+  hash: hash,
+  implementation_address: '0x2F4F4A52295940C576417d29F22EEb92B440eC89',
+  implementation_name: 'HomeBridge',
+  is_contract: true,
+  is_verified: true,
+  name: 'EternalStorageProxy',
+  private_tags: [ publicTag ],
+  public_tags: [ privateTag ],
+  token: null,
+  watchlist_names: [ watchlistName ],
+};
+
+export const validator: Address = {
+  block_number_balance_updated_at: 30811932,
+  coin_balance: '22910462800601256910890',
+  creation_tx_hash: null,
+  creator_address_hash: null,
+  exchange_rate: '0.00432018',
+  has_custom_methods_read: false,
+  has_custom_methods_write: false,
+  has_decompiled_code: false,
+  has_logs: false,
+  has_methods_read: false,
+  has_methods_read_proxy: false,
+  has_methods_write: false,
+  has_methods_write_proxy: false,
+  has_token_transfers: false,
+  has_tokens: false,
+  has_validated_blocks: true,
+  hash: hash,
+  implementation_address: null,
+  implementation_name: null,
+  is_contract: false,
+  is_verified: false,
+  name: 'Kiryl Ihnatsyeu',
+  private_tags: [],
+  public_tags: [],
+  token: null,
+  watchlist_names: [],
+};

mocks/address/counters.ts

+import type { AddressCounters } from 'types/api/address';
+
+export const forContract: AddressCounters = {
+  gas_usage_count: '319340525',
+  token_transfers_count: '0',
+  transactions_count: '5462',
+  validations_count: '0',
+};
+
+export const forToken: AddressCounters = {
+  gas_usage_count: '247479698',
+  token_transfers_count: '1',
+  transactions_count: '8474',
+  validations_count: '0',
+};
+
+export const forValidator: AddressCounters = {
+  gas_usage_count: '91675762951',
+  token_transfers_count: '0',
+  transactions_count: '820802',
+  validations_count: '1726416',
+};

ui/address/AddressDetails.pw.tsx

+import type { MetaMaskInpageProvider } from '@metamask/providers';
+import { test, expect } from '@playwright/experimental-ct-react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import * as addressMock from 'mocks/address/address';
+import * as countersMock from 'mocks/address/counters';
+import * as tokenBalanceMock from 'mocks/address/tokenBalance';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import AddressDetails from './AddressDetails';
+import MockAddressPage from './testUtils/MockAddressPage';
+
+const ADDRESS_HASH = addressMock.hash;
+const API_URL_ADDRESS = buildApiUrl('address', { id: ADDRESS_HASH });
+const API_URL_COUNTERS = buildApiUrl('address_counters', { id: ADDRESS_HASH });
+const API_URL_TOKEN_BALANCES = buildApiUrl('address_token_balances', { id: ADDRESS_HASH });
+const hooksConfig = {
+  router: {
+    query: { id: ADDRESS_HASH },
+  },
+};
+
+test('contract +@mobile', async({ mount, page }) => {
+  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(addressMock.contract),
+  }));
+  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(countersMock.forContract),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <AddressDetails addressQuery={{ data: addressMock.contract } as UseQueryResult<Address, unknown>}/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('token +@mobile', async({ mount, page }) => {
+  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(addressMock.token),
+  }));
+  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(countersMock.forToken),
+  }));
+  await page.route(API_URL_TOKEN_BALANCES, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(tokenBalanceMock.baseList),
+  }));
+
+  await page.evaluate(() => {
+    window.ethereum = { } as MetaMaskInpageProvider;
+  });
+
+  const component = await mount(
+    <TestApp>
+      <MockAddressPage>
+        <AddressDetails addressQuery={{ data: addressMock.token } as UseQueryResult<Address, unknown>}/>
+      </MockAddressPage>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('validator +@mobile', async({ mount, page }) => {
+  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(addressMock.validator),
+  }));
+  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(countersMock.forValidator),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <AddressDetails addressQuery={{ data: addressMock.validator } as UseQueryResult<Address, unknown>}/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/address/AddressDetails.tsx

@@ -18,6 +18,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import ExternalLink from 'ui/shared/ExternalLink';
 import HashStringShorten from 'ui/shared/HashStringShorten';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 import AddressAddToMetaMask from './details/AddressAddToMetaMask';
 import AddressBalance from './details/AddressBalance';
@@ -100,10 +101,22 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
             hint="Transaction and address of creation."
           >
             <AddressLink hash={ addressQuery.data.creator_address_hash } truncation="constant"/>
-            <Text whiteSpace="pre"> at </Text>
+            <Text whiteSpace="pre"> at txn </Text>
             <AddressLink hash={ addressQuery.data.creation_tx_hash } type="transaction" truncation="constant"/>
           </DetailsInfoItem>
         ) }
+        { addressQuery.data.is_contract && addressQuery.data.implementation_address && (
+          <DetailsInfoItem
+            title="Implementation"
+            hint="Implementation address of the proxy contract."
+            columnGap={ 1 }
+          >
+            <Link href={ link('address_index', { id: addressQuery.data.implementation_address }) }>{ addressQuery.data.implementation_name }</Link>
+            <Text variant="secondary" overflow="hidden">
+              <HashStringShortenDynamic hash={ `(${ addressQuery.data.implementation_address })` }/>
+            </Text>
+          </DetailsInfoItem>
+        ) }
         <AddressBalance data={ addressQuery.data }/>
         { addressQuery.data.has_tokens && (
           <DetailsInfoItem

ui/address/details/AddressBalance.tsx

@@ -71,6 +71,8 @@ const AddressBalance = ({ data }: Props) => {
     <DetailsInfoItem
       title="Balance"
       hint={ `Address balance in ${ appConfig.network.currency.symbol }. Doesn't include ERC20, ERC721 and ERC1155 tokens.` }
+      flexWrap="nowrap"
+      alignItems="flex-start"
     >
       <TokenLogo
         hash={ appConfig.network.currency.address }
@@ -86,6 +88,7 @@ const AddressBalance = ({ data }: Props) => {
         currency={ appConfig.network.currency.symbol }
         accuracyUsd={ 2 }
         accuracy={ 8 }
+        flexWrap="wrap"
       />
     </DetailsInfoItem>
   );

ui/pages/Token.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { withToken as contract } from 'mocks/address/address';
+import { token as contract } from 'mocks/address/address';
 import { tokenInfo, tokenCounters } from 'mocks/tokens/tokenInfo';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';