diff --git a/ui/addresses/AddressesTable.tsx b/ui/addresses/AddressesTable.tsx index 60634f96c7..9fac6d7081 100644 --- a/ui/addresses/AddressesTable.tsx +++ b/ui/addresses/AddressesTable.tsx @@ -25,8 +25,7 @@ const AddressesTable = ({ items, totalSupply, pageStartIndex, top, isLoading }: Rank - Address - Public tag + Address { `Balance ${ currencyUnits.ether }` } { hasPercentage && Percentage } Txn count diff --git a/ui/addresses/AddressesTableItem.tsx b/ui/addresses/AddressesTableItem.tsx index 82a0c03a31..f5696f184f 100644 --- a/ui/addresses/AddressesTableItem.tsx +++ b/ui/addresses/AddressesTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Text, Skeleton } from '@chakra-ui/react'; +import { Tr, Td, Text, Skeleton, Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -35,17 +35,17 @@ const AddressesTableItem = ({ - - - - { item.public_tags && item.public_tags.length ? item.public_tags.map(tag => ( - { tag.display_name } - )) : null } + + + { item.public_tags && item.public_tags.length ? item.public_tags.map(tag => ( + { tag.display_name } + )) : null } + diff --git a/ui/pages/Accounts.pw.tsx b/ui/pages/Accounts.pw.tsx index 669d44c00a..60a7b377bf 100644 --- a/ui/pages/Accounts.pw.tsx +++ b/ui/pages/Accounts.pw.tsx @@ -13,16 +13,23 @@ const addresses: AddressesResponse = { ...addressMocks.withName, tx_count: '1', coin_balance: '12345678901234567890000', - }, { + }, + { ...addressMocks.token, tx_count: '109123890123', coin_balance: '22222345678901234567890000', ens_domain_name: null, - }, { + }, + { ...addressMocks.withoutName, tx_count: '11', coin_balance: '1000000000000000000', }, + { + ...addressMocks.eoa, + tx_count: '420', + coin_balance: '123456', + }, ], total_supply: '25222000', next_page_params: null, diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx index 4e81d94cf2..c098700730 100644 --- a/ui/pages/Address.tsx +++ b/ui/pages/Address.tsx @@ -247,6 +247,7 @@ const AddressPageContent = () => { const tags: Array = React.useMemo(() => { return [ + ...(addressQuery.data?.public_tags?.map((tag) => ({ slug: tag.label, name: tag.display_name, tagType: 'custom' as const, ordinal: -1 })) || []), !addressQuery.data?.is_contract ? { slug: 'eoa', name: 'EOA', tagType: 'custom' as const, ordinal: -1 } : undefined, config.features.validators.isEnabled && addressQuery.data?.has_validated_blocks ? { slug: 'validator', name: 'Validator', tagType: 'custom' as const, ordinal: 10 } : diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png index 0b11b35de2..fcf54e6354 100644 Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png index 275cf30834..876ae4860a 100644 Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png index fe2d6d1e37..fe42bc107f 100644 Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx index 1030f28dbf..c75093ed2b 100644 --- a/ui/shared/entities/address/AddressEntity.pw.tsx +++ b/ui/shared/entities/address/AddressEntity.pw.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import * as addressMock from 'mocks/address/address'; import * as implementationsMock from 'mocks/address/implementations'; +import * as metadataMock from 'mocks/metadata/address'; import { test, expect } from 'playwright/lib'; import AddressEntity from './AddressEntity'; @@ -100,6 +101,18 @@ test.describe('proxy contract', () => { await expect(page.getByText('Proxy contract')).toBeVisible(); await expect(page).toHaveScreenshot(); }); + + test('with name tag', async({ render, page }) => { + const component = await render( + , + ); + + await component.getByText(/quack/i).hover(); + await expect(page.getByText('Proxy contract')).toBeVisible(); + await expect(page).toHaveScreenshot(); + }); }); test.describe('loading', () => { diff --git a/ui/shared/entities/address/AddressEntityContentProxy.tsx b/ui/shared/entities/address/AddressEntityContentProxy.tsx index 4eb72af252..066c8e5448 100644 --- a/ui/shared/entities/address/AddressEntityContentProxy.tsx +++ b/ui/shared/entities/address/AddressEntityContentProxy.tsx @@ -21,6 +21,8 @@ const AddressEntityContentProxy = (props: ContentProps) => { } const colNum = Math.min(implementations.length, 3); + const nameTag = props.address.metadata?.tags.find(tag => tag.tagType === 'name')?.name; + const implementationName = implementations.length === 1 && implementations[0].name ? implementations[0].name : undefined; return ( @@ -29,8 +31,8 @@ const AddressEntityContentProxy = (props: ContentProps) => { diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-name-tag-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-name-tag-1.png new file mode 100644 index 0000000000..6ce9f48437 Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-name-tag-1.png differ