Add ability to report nft as spam to simplehash

src/components/expanded-state/UniqueTokenExpandedState.tsx

@@ -254,6 +254,7 @@ const UniqueTokenExpandedState = ({ asset: passedAsset, external }: UniqueTokenE
   const isSupportedOnRainbowWeb = getIsSupportedOnRainbowWeb(asset.network);
 
   const [isRefreshMetadataToastActive, setIsRefreshMetadataToastActive] = useState(false);
+  const [isReportSpamToastActive, setIsReportSpamToastActive] = useState(false);
 
   const activateRefreshMetadataToast = useCallback(() => {
     if (!isRefreshMetadataToastActive) {
@@ -264,6 +265,15 @@ const UniqueTokenExpandedState = ({ asset: passedAsset, external }: UniqueTokenE
     }
   }, [isRefreshMetadataToastActive]);
 
+  const activateReportSpamToast = useCallback(() => {
+    if (!isReportSpamToastActive) {
+      setIsReportSpamToastActive(true);
+      setTimeout(() => {
+        setIsReportSpamToastActive(false);
+      }, 3000);
+    }
+  }, [isReportSpamToastActive]);
+
   const {
     collection: { description: familyDescription, external_url: familyLink, slug },
     description,
@@ -477,6 +487,7 @@ const UniqueTokenExpandedState = ({ asset: passedAsset, external }: UniqueTokenE
                         isSupportedOnRainbowWeb={isSupportedOnRainbowWeb}
                         rainbowWebUrl={rainbowWebUrl}
                         onRefresh={activateRefreshMetadataToast}
+                        onReport={activateReportSpamToast}
                       />
                     </Stack>
                     <Stack space="15px (Deprecated)">
@@ -672,7 +683,8 @@ const UniqueTokenExpandedState = ({ asset: passedAsset, external }: UniqueTokenE
           isAdded={isShowcaseAsset}
           removeCopy={lang.t('expanded_state.unique_expanded.toast_removed_from_showcase')}
         />
-        <Toast isVisible={isRefreshMetadataToastActive} text="Requesting metadata..." />
+        <Toast isVisible={isRefreshMetadataToastActive} text={lang.t('expanded_state.unique_expanded.refreshing')} />
+        <Toast isVisible={isReportSpamToastActive} text={lang.t('expanded_state.unique_expanded.reported')} />
       </ToastPositionContainer>
     </>
   );

src/components/expanded-state/unique-token/UniqueTokenExpandedStateHeader.tsx

@@ -19,7 +19,7 @@ import { position } from '@/styles';
 import { ethereumUtils, magicMemo, showActionSheetWithOptions } from '@/utils';
 import { getFullResUrl } from '@/utils/getFullResUrl';
 import isSVGImage from '@/utils/isSVG';
-import { refreshNFTContractMetadata } from '@/resources/nfts/simplehash';
+import { refreshNFTContractMetadata, reportNFT } from '@/resources/nfts/simplehash';
 import { ContextCircleButton } from '@/components/context-menu';
 import { IS_ANDROID, IS_IOS } from '@/env';
 import { MenuActionConfig, MenuConfig } from 'react-native-ios-context-menu';
@@ -33,6 +33,7 @@ const AssetActionsEnum = {
   opensea: 'opensea',
   looksrare: 'looksrare',
   refresh: 'refresh',
+  report: 'report',
 } as const;
 
 const getAssetActions = (network: Network) =>
@@ -95,6 +96,14 @@ const getAssetActions = (network: Network) =>
         iconValue: 'arrow.clockwise',
       },
     },
+    [AssetActionsEnum.report]: {
+      actionKey: AssetActionsEnum.report,
+      actionTitle: lang.t('expanded_state.unique_expanded.report'),
+      icon: {
+        iconType: 'SYSTEM',
+        iconValue: 'exclamationmark.triangle',
+      },
+    },
     [AssetActionsEnum.looksrare]: {
       actionKey: AssetActionsEnum.looksrare,
       actionTitle: 'LooksRare',
@@ -171,6 +180,7 @@ interface UniqueTokenExpandedStateHeaderProps {
   rainbowWebUrl: string;
   isModificationActionsEnabled?: boolean;
   onRefresh: () => void;
+  onReport: () => void;
 }
 
 const UniqueTokenExpandedStateHeader = ({
@@ -180,6 +190,7 @@ const UniqueTokenExpandedStateHeader = ({
   rainbowWebUrl,
   isModificationActionsEnabled = true,
   onRefresh,
+  onReport,
 }: UniqueTokenExpandedStateHeaderProps) => {
   const { setClipboard } = useClipboard();
   const { width: deviceWidth } = useDimensions();
@@ -259,6 +270,9 @@ const UniqueTokenExpandedStateHeader = ({
         {
           ...AssetActions[AssetActionsEnum.refresh],
         },
+        {
+          ...AssetActions[AssetActionsEnum.report],
+        },
         ...(isModificationActionsEnabled
           ? [
               {
@@ -359,6 +373,8 @@ const UniqueTokenExpandedStateHeader = ({
         goBack();
       } else if (actionKey === AssetActionsEnum.refresh) {
         refreshNFTContractMetadata(asset).then(onRefresh);
+      } else if (actionKey === AssetActionsEnum.report) {
+        reportNFT(asset).then(onReport);
       }
     },
     [
@@ -372,6 +388,7 @@ const UniqueTokenExpandedStateHeader = ({
       isShowcaseAsset,
       removeShowcaseToken,
       onRefresh,
+      onReport,
     ]
   );
 

src/languages/en_US.json

@@ -683,6 +683,8 @@
         "showcase": "Showcase",
         "toast_added_to_showcase": "Added to showcase",
         "toast_removed_from_showcase": "Removed from showcase",
+        "refreshing": "Refreshing metadata...",
+        "reported": "Reported as spam",
         "twitter": "Twitter",
         "view_all_with_property": "View All with Property",
         "view_collection": "View Collection",
@@ -692,6 +694,7 @@
         "view_on_platform": "View on %{platform}",
         "view_on_web": "View on Web",
         "refresh": "Refresh Metadata",
+        "report": "Report as Spam",
         "hide": "Hide",
         "unhide": "Unhide"
       }

src/resources/nfts/simplehash/index.ts

@@ -144,3 +144,36 @@ export async function refreshNFTContractMetadata(nft: UniqueAsset) {
     }
   }
 }
+
+/**
+ * Report an nft as spam to SimpleHash
+ * @param nft
+ */
+export async function reportNFT(nft: UniqueAsset) {
+  const chain = nft.isPoap ? SimpleHashChain.Gnosis : getSimpleHashChainFromNetwork(nft.network);
+
+  if (!chain) {
+    logger.error(new RainbowError(`reportNFT: no SimpleHash chain for network: ${nft.network}`));
+  }
+
+  try {
+    await nftApi.post(
+      '/nfts/report/spam',
+      {
+        contract_address: nft.asset_contract.address,
+        chain_id: chain,
+        token_id: nft.id,
+        event_type: 'mark_as_spam',
+      },
+      {
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+          'x-api-key': NFT_API_KEY,
+        },
+      }
+    );
+  } catch {
+    logger.error(new RainbowError(`reportNFT: failed to report NFT ${nft.asset_contract.address} #${nft.id} as spam to SimpleHash`));
+  }
+}