Top accounts: show public tag next to address (#2163)

* Public tags: remove references to old tags from the code

Fixes #1894

* show name tag of proxy contracts in list views

ui/addresses/AddressesTable.tsx

@@ -25,8 +25,7 @@ const AddressesTable = ({ items, totalSupply, pageStartIndex, top, isLoading }:
       <Thead top={ top }>
         <Tr>
           <Th width="64px">Rank</Th>
-          <Th width={ hasPercentage ? '30%' : '40%' }>Address</Th>
-          <Th width="20%" pl={ 10 }>Public tag</Th>
+          <Th width={ hasPercentage ? '50%' : '60%' }>Address</Th>
           <Th width={ hasPercentage ? '20%' : '25%' } isNumeric>{ `Balance ${ currencyUnits.ether }` }</Th>
           { hasPercentage && <Th width="15%" isNumeric>Percentage</Th> }
           <Th width="15%" isNumeric>Txn count</Th>

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 = ({
         </Skeleton>
       </Td>
       <Td>
-        <AddressEntity
-          address={ item }
-          isLoading={ isLoading }
-          fontWeight={ 700 }
-          my="2px"
-        />
-      </Td>
-      <Td pl={ 10 }>
-        { item.public_tags && item.public_tags.length ? item.public_tags.map(tag => (
-          <Tag key={ tag.label } isLoading={ isLoading } isTruncated>{ tag.display_name }</Tag>
-        )) : null }
+        <Flex alignItems="center" columnGap={ 2 }>
+          <AddressEntity
+            address={ item }
+            isLoading={ isLoading }
+            fontWeight={ 700 }
+            my="2px"
+          />
+          { item.public_tags && item.public_tags.length ? item.public_tags.map(tag => (
+            <Tag key={ tag.label } isLoading={ isLoading } isTruncated>{ tag.display_name }</Tag>
+          )) : null }
+        </Flex>
       </Td>
       <Td isNumeric>
         <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">

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,

ui/pages/Address.tsx

@@ -247,6 +247,7 @@ const AddressPageContent = () => {
 
   const tags: Array<EntityTag> = 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 } :

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(
+      <AddressEntity
+        address={{ ...addressMock.contract, metadata: { reputation: 1, tags: [ metadataMock.nameTag ] } }}
+      />,
+    );
+
+    await component.getByText(/quack/i).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
 });
 
 test.describe('loading', () => {

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) => {
         <Box display="inline-flex" w="100%">
           <EntityBase.Content
             { ...props }
-            truncation={ implementationName || props.address.name ? 'tail' : props.truncation }
-            text={ implementationName || props.address.name || props.address.hash }
+            truncation={ nameTag || implementationName || props.address.name ? 'tail' : props.truncation }
+            text={ nameTag || implementationName || props.address.name || props.address.hash }
           />
         </Box>
       </PopoverTrigger>