Merge pull request #2289 from blockscout/fe-2236

Public tags: improvement batch

mocks/metadata/address.ts

@@ -102,3 +102,14 @@ export const noteTag: AddressMetadataTagApi = {
     data: '<b>Warning!</b> This is scam! See the <a href="https://example.com" target="_blank">report</a>',
   },
 };
+
+export const noteTag2: AddressMetadataTagApi = {
+  slug: 'note0',
+  name: 'note_0',
+  tagType: 'note',
+  ordinal: 0,
+  meta: {
+    alertStatus: 'info',
+    data: 'The token MILF was launched on May 13, 2021. The maximum total supply of the token is 100 billion.',
+  },
+};

ui/address/details/AddressMetadataAlert.pw.tsx

@@ -6,7 +6,7 @@ import { test, expect } from 'playwright/lib';
 import AddressMetadataAlert from './AddressMetadataAlert';
 
 test('base view', async({ render }) => {
-  const component = await render(<AddressMetadataAlert tags={ [ metadataMock.noteTag ] }/>);
+  const component = await render(<AddressMetadataAlert tags={ [ metadataMock.noteTag, metadataMock.noteTag2 ] }/>);
 
   await expect(component).toHaveScreenshot();
 });

ui/address/details/AddressMetadataAlert.tsx

-import { Alert, chakra } from '@chakra-ui/react';
+import { Alert, Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
@@ -9,35 +9,34 @@ interface Props {
 }
 
 const AddressMetadataAlert = ({ tags, className }: Props) => {
-  const noteTag = tags?.find(({ tagType }) => tagType === 'note');
-  if (!noteTag) {
-    return null;
-  }
-
-  const content = noteTag.meta?.data;
+  const noteTags = tags?.filter(({ tagType }) => tagType === 'note').filter(({ meta }) => meta?.data);
 
-  if (!content) {
+  if (!noteTags?.length) {
     return null;
   }
 
   return (
-    <Alert
-      className={ className }
-      status={ noteTag.meta?.alertStatus ?? 'error' }
-      bgColor={ noteTag.meta?.alertBgColor }
-      color={ noteTag.meta?.alertTextColor }
-      whiteSpace="pre-wrap"
-      display="inline-block"
-      sx={{
-        '& a': {
-          color: 'link',
-          _hover: {
-            color: 'link_hovered',
-          },
-        },
-      }}
-      dangerouslySetInnerHTML={{ __html: content }}
-    />
+    <Flex flexDir="column" gap={ 3 } className={ className }>
+      { noteTags.map((noteTag) => (
+        <Alert
+          key={ noteTag.name }
+          status={ noteTag.meta?.alertStatus ?? 'error' }
+          bgColor={ noteTag.meta?.alertBgColor }
+          color={ noteTag.meta?.alertTextColor }
+          whiteSpace="pre-wrap"
+          display="inline-block"
+          sx={{
+            '& a': {
+              color: 'link',
+              _hover: {
+                color: 'link_hovered',
+              },
+            },
+          }}
+          dangerouslySetInnerHTML={{ __html: noteTag.meta?.data ?? '' }}
+        />
+      )) }
+    </Flex>
   );
 };
 

ui/pages/Address.tsx

@@ -282,7 +282,7 @@ const AddressPageContent = () => {
         { slug: 'mud', name: 'MUD World', tagType: 'custom' as const, ordinal: -10 } :
         undefined,
       ...formatUserTags(addressQuery.data),
-      ...(addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags || []),
+      ...(addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags.filter(tag => tag.tagType !== 'note') || []),
     ].filter(Boolean).sort(sortEntityTags);
   }, [ addressMetadataQuery.data, addressQuery.data, hash, isSafeAddress, userOpsAccountQuery.data, mudTablesCountQuery.data, usernameApiTag ]);
 

ui/shared/EntityTags/EntityTags.tsx

@@ -45,7 +45,7 @@ const EntityTags = ({ tags, className, isLoading }: Props) => {
                 +{ tags.length - visibleNum }
               </Tag>
             </PopoverTrigger>
-            <PopoverContent w="300px">
+            <PopoverContent maxW="300px" w="auto">
               <PopoverBody >
                 <Flex columnGap={ 2 } rowGap={ 2 } flexWrap="wrap">
                   { tags.slice(visibleNum).map((tag) => <EntityTag key={ tag.slug } data={ tag }/>) }