From 080372310197955a4526bc326234a3ab3fc71db2 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Mon, 26 Aug 2024 13:36:56 +0200
Subject: [PATCH] Metadata: show Notes

Fixes #2174
---
 lib/address/parseMetaPayload.ts               |   3 ++
 mocks/metadata/address.ts                     |  12 +++++
 theme/components/Alert/Alert.ts               |   2 +-
 types/api/addressMetadata.ts                  |   3 ++
 .../details/AddressMetadataAlert.pw.tsx       |  13 ++++++
 ui/address/details/AddressMetadataAlert.tsx   |  43 ++++++++++++++++++
 ...tadataAlert.pw.tsx_default_base-view-1.png | Bin 0 -> 4407 bytes
 ui/pages/Address.tsx                          |   3 ++
 8 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 ui/address/details/AddressMetadataAlert.pw.tsx
 create mode 100644 ui/address/details/AddressMetadataAlert.tsx
 create mode 100644 ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png

diff --git a/lib/address/parseMetaPayload.ts b/lib/address/parseMetaPayload.ts
index e8b067b148..c02d2c4f20 100644
--- a/lib/address/parseMetaPayload.ts
+++ b/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) {
diff --git a/mocks/metadata/address.ts b/mocks/metadata/address.ts
index f708fcb319..93860f4b44 100644
--- a/mocks/metadata/address.ts
+++ b/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>',
+  },
+};
diff --git a/theme/components/Alert/Alert.ts b/theme/components/Alert/Alert.ts
index 457511c2d7..acce04ee0e 100644
--- a/theme/components/Alert/Alert.ts
+++ b/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,
   };
 }
diff --git a/types/api/addressMetadata.ts b/types/api/addressMetadata.ts
index e433ca21ef..caabd8535a 100644
--- a/types/api/addressMetadata.ts
+++ b/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;
 }
 
diff --git a/ui/address/details/AddressMetadataAlert.pw.tsx b/ui/address/details/AddressMetadataAlert.pw.tsx
new file mode 100644
index 0000000000..22db404125
--- /dev/null
+++ b/ui/address/details/AddressMetadataAlert.pw.tsx
@@ -0,0 +1,13 @@
+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();
+});
diff --git a/ui/address/details/AddressMetadataAlert.tsx b/ui/address/details/AddressMetadataAlert.tsx
new file mode 100644
index 0000000000..707ba804d4
--- /dev/null
+++ b/ui/address/details/AddressMetadataAlert.tsx
@@ -0,0 +1,43 @@
+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);
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
new file mode 100644
index 0000000000000000000000000000000000000000..b77a94064dd527c1119dfc5c198056a3fe0ef477
GIT binary patch
literal 4407
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
D%tBq+

literal 0
HcmV?d00001

diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
index c098700730..f834e3fee5 100644
--- a/ui/pages/Address.tsx
+++ b/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 */ }