Adding a hidden debug page for spam NFTs (#1187)

* first draft * adding spam scores to mouseover, show collection id instead of nft id, added copy button * changing message grammar * removing console logs * remove a console log --------- Co-authored-by: David Suh <davidsuh@Davids-MacBook-Pro.local> Co-authored-by: Marshall T. Rose <mrose17@gmail.com>
brave · Aug 1, 2023 · 03e2ccf · 03e2ccf
1 parent c432ce2
commit 03e2ccf
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 6 deletions.
diff --git a/src/components/web3/NFTDebugPanel.tsx b/src/components/web3/NFTDebugPanel.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { NFT } from "./core";
+import { Item, SelectableImageList } from "./SelectableImageList";
+import { Button } from "../Button";
+
+interface Props {
+  startCall: boolean;
+  nfts?: NFT[];
+  nft: NFT | null;
+  setNft: (nft: NFT | null) => void;
+}
+
+const showSpamScore = (item: Item) => {
+  return `${item.name} (${item.chain}) ${
+    item.collection?.spam_score
+      ? "Spam Score: " + `${item.collection.spam_score}`
+      : ""
+  }`;
+};
+
+export const NFTDebugPanel: React.FC<Props> = ({
+  startCall,
+  nfts = [],
+  nft,
+  setNft,
+}) => {
+  const nftItems = nfts.map((n: NFT) => ({ ...n, imageUrl: n.image_url }));
+  const [selectedNftIdxs, setSelectedNftIdxs] = useState<number[]>([]);
+  const selectedNftsId = nfts
+    .filter((n: NFT, index) => selectedNftIdxs.includes(index))
+    .map((n: NFT) =>
+      n.collection ? n.collection.collection_id : "no-collection-id"
+    );
+  const onToggle = (idx: number) => {
+    if (selectedNftIdxs.includes(idx))
+      setSelectedNftIdxs(selectedNftIdxs.filter((i: number) => i != idx));
+    else {
+      setSelectedNftIdxs(selectedNftIdxs.concat([idx]));
+    }
+  };
+  const copySelectedIdxs = () => {
+    navigator.clipboard.writeText(selectedNftsId.join("\n"));
+  };
+
+  return (
+    <div>
+      <div css={{ fontSize: "26px" }}>DEBUG MODE</div>
+      <SelectableImageList
+        items={nftItems}
+        selectedIdxs={selectedNftIdxs}
+        onToggleSelection={onToggle}
+        onMouseOverText={showSpamScore}
+      />
+      {selectedNftsId.map((s: string) => (
+        <div>{s}</div>
+      ))}
+      <Button
+        css={{
+          marginTop: "10px",
+        }}
+        onClick={copySelectedIdxs}
+      >
+        Copy Selected IDs
+      </Button>
+    </div>
+  );
+};
diff --git a/src/components/web3/SelectableImageList.tsx b/src/components/web3/SelectableImageList.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Dispatch } from "react";
 import noNftImage from "../../images/no-nft-image.png";
 
-interface Item {
+export interface Item {
   imageUrl: string;
   name?: string;
   chain: string;
@@ -18,12 +18,18 @@ interface Props {
   items: Item[];
   selectedIdxs: number[];
   onToggleSelection: Dispatch<number>;
+  onMouseOverText?: (item: Item) => string;
 }
 
+const showNameAndNetwork = (item: Item) => {
+  return `${item.name} (${item.chain})`;
+};
+
 export const SelectableImageList: React.FC<Props> = ({
   items,
   selectedIdxs,
   onToggleSelection,
+  onMouseOverText = showNameAndNetwork,
 }) => {
   const showCheckbox = items.some(
     (item) => item.collection !== undefined && item.collection.spam_score >= 80
@@ -64,12 +70,14 @@ export const SelectableImageList: React.FC<Props> = ({
         {filteredItems.map((item, idx) => (
           <div
             key={idx}
-            onClick={() => onToggleSelection(item[1])}
+            onClick={() => {
+              onToggleSelection(item[1]);
+            }}
             css={{ padding: "5px 5px 5px 0" }}
             title={item[0].name}
           >
             <img
-              title={`${item[0].name} (${item[0].chain})`}
+              title={onMouseOverText(item[0])}
               height={167}
               width={167}
               src={item[0].imageUrl ? item[0].imageUrl : noNftImage}

diff --git a/src/components/web3/StartCall.tsx b/src/components/web3/StartCall.tsx
@@ -8,7 +8,9 @@ import { Login } from "./Login";
 import { OptionalSettings } from "./OptionalSettings";
 import { bodyText, header } from "./styles";
 import { useWeb3CallState } from "../../hooks/use-web3-call-state";
+import { useParams } from "../../hooks/use-params";
 import { TranslationKeys } from "../../i18n/i18next";
+import { NFTDebugPanel } from "./NFTDebugPanel";
 
 type Props = {
   setJwt: (jwt: string) => void;
@@ -31,6 +33,8 @@ export const StartCall: React.FC<Props> = ({
   const [nftCollections, setNFTCollections] = useState<
     NFTcollection[] | undefined
   >();
+  const isNFTDebug = useParams().isDebug;
+  const [debugMode, setDebugMode] = useState<boolean>(false);
   const [feedbackMessage, setFeedbackMessage] = useState<TranslationKeys>();
   const {
     web3Address,
@@ -79,6 +83,10 @@ export const StartCall: React.FC<Props> = ({
     }
   }, [web3Address]);
 
+  const onChangeDebugMode = () => {
+    setDebugMode(!debugMode);
+  };
+
   const onStartCall = async () => {
     if (!web3Address) return;
 
@@ -112,10 +120,18 @@ export const StartCall: React.FC<Props> = ({
       }}
     >
       <div css={[header, { marginBottom: "22px" }]}>Start a Web3 Call</div>
-
+      {isNFTDebug && (
+        <label>
+          <input
+            type="checkbox"
+            value="DEBUG MODE"
+            onChange={onChangeDebugMode}
+          />
+          Debug Mode
+        </label>
+      )}
       <Login web3address={web3Address} onAddressSelected={setWeb3Address} />
-
-      {web3Address && (
+      {web3Address && (!isNFTDebug || !debugMode) && (
         <div css={{ marginTop: "28px" }}>
           <OptionalSettings
             startCall={true}
@@ -145,6 +161,9 @@ export const StartCall: React.FC<Props> = ({
           </Button>
         </div>
       )}
+      {isNFTDebug && debugMode && (
+        <NFTDebugPanel startCall={true} nfts={nfts} nft={nft} setNft={setNft} />
+      )}
     </div>
   );
 };
diff --git a/src/hooks/use-params.ts b/src/hooks/use-params.ts
@@ -8,6 +8,8 @@ interface Params {
   // url has "create_only=y" meaning we should create the room but then immediately close the window
   // rather than entering the room. This is used by the google calendar extension.
   isCreateOnly: boolean;
+
+  isDebug: boolean;
 }
 
 export function useParams(): Params {
@@ -18,6 +20,7 @@ export function useParams(): Params {
     return {
       isCreate: p.get("create") === "y",
       isCreateOnly: p.get("create_only") === "y",
+      isDebug: p.get("debug") === "y",
     };
   });