Adding a check-box to filter NFTs with high spam score

src/components/web3/SelectableImageList.tsx

@@ -1,9 +1,16 @@
+import { useEffect, useState } from "react";
 import { Dispatch } from "react";
 import noNftImage from "../../images/no-nft-image.png";
 
 interface Item {
   imageUrl: string;
   name?: string;
+  collection?: {
+    collection_id: string;
+    name: string;
+    image_url: string;
+    spam_score: number;
+  };
 }
 
 interface Props {
@@ -17,30 +24,62 @@ export const SelectableImageList: React.FC<Props> = ({
   selectedIdxs,
   onToggleSelection,
 }) => {
+  const showCheckbox = items.some(
+    (item) => item.collection !== undefined && item.collection.spam_score > 80
+  );
+
+  const [showSpamItems, setShowSpamItems] = useState(false);
+
+  const filteredItems = showSpamItems
+    ? items
+    : items.filter((item) => {
+        if (item.collection?.spam_score !== undefined) {
+          return item.collection.spam_score < 80;
+        }
+        return true;
+      });
+
+  const onToggleSpamItems = () => {
+    setShowSpamItems(!showSpamItems);
+  };
+
   return (
-    <div css={{ display: "flex", flexWrap: "wrap" }}>
-      {items.map((item, idx) => (
-        <div
-          key={idx}
-          onClick={() => onToggleSelection(idx)}
-          css={{ padding: "5px 5px 5px 0" }}
-          title={item.name}
-        >
-          <img
-            title={item.name}
-            height={167}
-            width={167}
-            src={item.imageUrl ? item.imageUrl : noNftImage}
-            css={{
-              border: `5px solid ${
-                selectedIdxs.includes(idx) ? "white" : "transparent"
-              }`,
-            }}
-            alt="item"
-          />
-          {}
+    <div css={{ display: "flex", flexDirection: "column" }}>
+      {showCheckbox && (
+        <div css={{ marginBottom: "10px" }}>
+          <label>
+            <input
+              type="checkbox"
+              checked={showSpamItems}
+              onChange={onToggleSpamItems}
+            />
+            {showSpamItems ? "Show all NFTs" : "Show all NFTs (not all being shown)"}
+          </label>
         </div>
-      ))}
+      )}
+      <div css={{ display: "flex", flexWrap: "wrap" }}>
+        {filteredItems.map((item, idx) => (
+          <div
+            key={idx}
+            onClick={() => onToggleSelection(idx)}
+            css={{ padding: "5px 5px 5px 0" }}
+            title={item.name}
+          >
+            <img
+              title={item.name}
+              height={167}
+              width={167}
+              src={item.imageUrl ? item.imageUrl : noNftImage}
+              css={{
+                border: `5px solid ${
+                  selectedIdxs.includes(idx) ? "white" : "transparent"
+                }`,
+              }}
+              alt="item"
+            />
+          </div>
+        ))}
+      </div>
     </div>
   );
-};
+};

src/components/web3/api.ts

@@ -75,12 +75,6 @@ export const web3NFTs = async (address: string): Promise<NFT[]> => {
 
     const result: NFT[] = [];
     nfts.nfts.forEach((nft: any) => {
-      if (
-        "spam_score" in nft.collection &&
-        typeof nft.collection.spam_score === "number" &&
-        nft.collection.spam_score >= 80
-      )
-        return;
       result.push({
         image_url: nft.previews?.image_small_url
           ? nft.previews.image_small_url
@@ -90,6 +84,7 @@ export const web3NFTs = async (address: string): Promise<NFT[]> => {
           collection_id: nft.collection?.collection_id,
           name: nft.collection?.name,
           image_url: nft.collection?.image_url,
+          spam_score: nft.collection.spam_score,
         },
       });
     });

src/components/web3/core.ts

@@ -22,6 +22,7 @@ export interface NFT {
     collection_id: string;
     name: string;
     image_url: string;
+    spam_score: number;
   };
   previews?: {
     image_small_url: string;