Skip to content

Commit

Permalink
Adding a hidden debug page for spam NFTs (#1187)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
3 people authored Aug 1, 2023
1 parent c432ce2 commit 03e2ccf
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 6 deletions.
67 changes: 67 additions & 0 deletions src/components/web3/NFTDebugPanel.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
14 changes: 11 additions & 3 deletions src/components/web3/SelectableImageList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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}
Expand Down
25 changes: 22 additions & 3 deletions src/components/web3/StartCall.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand Down Expand Up @@ -79,6 +83,10 @@ export const StartCall: React.FC<Props> = ({
}
}, [web3Address]);

const onChangeDebugMode = () => {
setDebugMode(!debugMode);
};

const onStartCall = async () => {
if (!web3Address) return;

Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -145,6 +161,9 @@ export const StartCall: React.FC<Props> = ({
</Button>
</div>
)}
{isNFTDebug && debugMode && (
<NFTDebugPanel startCall={true} nfts={nfts} nft={nft} setNft={setNft} />
)}
</div>
);
};
3 changes: 3 additions & 0 deletions src/hooks/use-params.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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",
};
});

Expand Down

0 comments on commit 03e2ccf

Please sign in to comment.