diff --git a/mocks/metadata/address.ts b/mocks/metadata/address.ts index 93860f4b44..186711cc04 100644 --- a/mocks/metadata/address.ts +++ b/mocks/metadata/address.ts @@ -102,3 +102,14 @@ export const noteTag: AddressMetadataTagApi = { data: 'Warning! This is scam! See the report', }, }; + +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.', + }, +}; diff --git a/ui/address/details/AddressMetadataAlert.pw.tsx b/ui/address/details/AddressMetadataAlert.pw.tsx index 7fedde5059..70cba4a672 100644 --- a/ui/address/details/AddressMetadataAlert.pw.tsx +++ b/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(); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/address/details/AddressMetadataAlert.tsx b/ui/address/details/AddressMetadataAlert.tsx index aced9dc091..fc982b229c 100644 --- a/ui/address/details/AddressMetadataAlert.tsx +++ b/ui/address/details/AddressMetadataAlert.tsx @@ -1,4 +1,4 @@ -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 ( - + + { noteTags.map((noteTag) => ( + + )) } + ); }; diff --git a/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png b/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png index 68bf3dc7d0..f3e1c59562 100644 Binary files a/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png and b/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx index 233a365c1e..6d9930bbcd 100644 --- a/ui/pages/Address.tsx +++ b/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 ]); diff --git a/ui/shared/EntityTags/EntityTags.tsx b/ui/shared/EntityTags/EntityTags.tsx index a9cfa0cf17..c7f4370c4d 100644 --- a/ui/shared/EntityTags/EntityTags.tsx +++ b/ui/shared/EntityTags/EntityTags.tsx @@ -45,7 +45,7 @@ const EntityTags = ({ tags, className, isLoading }: Props) => { +{ tags.length - visibleNum } - + { tags.slice(visibleNum).map((tag) => ) }