Metadata: show Notes (#2191)

Fixes #2174

lib/address/parseMetaPayload.ts

@@ -27,6 +27,9 @@ export default function parseMetaPayload(meta: AddressMetadataTag['meta']): Addr
       'appLogoURL',
       'appActionButtonText',
       'warpcastHandle',
+      'data',
+      'alertBgColor',
+      'alertTextColor',
     ];
 
     for (const stringField of stringFields) {

mocks/metadata/address.ts

@@ -90,3 +90,15 @@ export const warpcastTag: AddressMetadataTagApi = {
     warpcastHandle: 'duckYduck',
   },
 };
+
+export const noteTag: AddressMetadataTagApi = {
+  slug: 'scam-tag',
+  name: 'Phish 🐟',
+  tagType: 'note',
+  ordinal: 100,
+  meta: {
+    alertBgColor: 'deeppink',
+    alertTextColor: 'white',
+    data: '<b>Warning!</b> This is scam! See the <a href="https://example.com" target="_blank">report</a>',
+  },
+};

theme/components/Alert/Alert.ts

@@ -13,7 +13,7 @@ function getBg(props: StyleFunctionProps) {
   const { theme, colorScheme: c } = props;
   const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
   return {
-    light: `colors.${ c }.${ c === 'red' ? '50' : '100' }`,
+    light: `colors.${ c }.100`,
     dark: darkBg,
   };
 }

types/api/addressMetadata.ts

@@ -32,6 +32,9 @@ export interface AddressMetadataTagApi extends Omit<AddressMetadataTag, 'meta'>
     appLogoURL?: string;
     appActionButtonText?: string;
     warpcastHandle?: string;
+    data?: string;
+    alertBgColor?: string;
+    alertTextColor?: string;
   } | null;
 }
 

ui/address/details/AddressMetadataAlert.pw.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import * as metadataMock from 'mocks/metadata/address';
+import { test, expect } from 'playwright/lib';
+
+import AddressMetadataAlert from './AddressMetadataAlert';
+
+test('base view', async({ render }) => {
+  const component = await render(<Box mt={ 1 }><AddressMetadataAlert tags={ [ metadataMock.noteTag ] }/></Box>);
+
+  await expect(component).toHaveScreenshot();
+});

ui/address/details/AddressMetadataAlert.tsx

+import { Alert } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+interface Props {
+  tags: Array<AddressMetadataTagFormatted> | undefined;
+}
+
+const AddressMetadataAlert = ({ tags }: Props) => {
+  const noteTag = tags?.find(({ tagType }) => tagType === 'note');
+  if (!noteTag) {
+    return null;
+  }
+
+  const content = noteTag.meta?.data;
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <Alert
+      mt="-4px"
+      mb={ 6 }
+      status="error"
+      bgColor={ noteTag.meta?.alertBgColor }
+      color={ noteTag.meta?.alertTextColor }
+      whiteSpace="pre-wrap"
+      sx={{
+        '& a': {
+          color: 'link',
+          _hover: {
+            color: 'link_hovered',
+          },
+        },
+      }}
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  );
+};
+
+export default React.memo(AddressMetadataAlert);

ui/pages/Address.tsx

@@ -31,6 +31,7 @@ import AddressTxs from 'ui/address/AddressTxs';
 import AddressUserOps from 'ui/address/AddressUserOps';
 import AddressWithdrawals from 'ui/address/AddressWithdrawals';
 import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
+import AddressMetadataAlert from 'ui/address/details/AddressMetadataAlert';
 import AddressQrCode from 'ui/address/details/AddressQrCode';
 import AddressEnsDomains from 'ui/address/ensDomains/AddressEnsDomains';
 import SolidityscanReport from 'ui/address/SolidityscanReport';
@@ -345,6 +346,8 @@ const AddressPageContent = () => {
         secondRow={ titleSecondRow }
         isLoading={ isLoading }
       />
+      { !addressMetadataQuery.isPending &&
+        <AddressMetadataAlert tags={ addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags }/> }
       { config.features.metasuites.isEnabled && <Box display="none" id="meta-suites__address" data-ready={ !isLoading }/> }
       <AddressDetails addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>
       { /* should stay before tabs to scroll up with pagination */ }