diff --git a/src/components/web3/NFTDebugPanel.tsx b/src/components/web3/NFTDebugPanel.tsx new file mode 100644 index 00000000..036b2eee --- /dev/null +++ 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 = ({ + startCall, + nfts = [], + nft, + setNft, +}) => { + const nftItems = nfts.map((n: NFT) => ({ ...n, imageUrl: n.image_url })); + const [selectedNftIdxs, setSelectedNftIdxs] = useState([]); + 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 ( +
+
DEBUG MODE
+ + {selectedNftsId.map((s: string) => ( +
{s}
+ ))} + +
+ ); +}; diff --git a/src/components/web3/SelectableImageList.tsx b/src/components/web3/SelectableImageList.tsx index 6d8b82c7..f3b31ba8 100644 --- 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; + onMouseOverText?: (item: Item) => string; } +const showNameAndNetwork = (item: Item) => { + return `${item.name} (${item.chain})`; +}; + export const SelectableImageList: React.FC = ({ 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 = ({ {filteredItems.map((item, idx) => (
onToggleSelection(item[1])} + onClick={() => { + onToggleSelection(item[1]); + }} css={{ padding: "5px 5px 5px 0" }} title={item[0].name} > void; @@ -31,6 +33,8 @@ export const StartCall: React.FC = ({ const [nftCollections, setNFTCollections] = useState< NFTcollection[] | undefined >(); + const isNFTDebug = useParams().isDebug; + const [debugMode, setDebugMode] = useState(false); const [feedbackMessage, setFeedbackMessage] = useState(); const { web3Address, @@ -79,6 +83,10 @@ export const StartCall: React.FC = ({ } }, [web3Address]); + const onChangeDebugMode = () => { + setDebugMode(!debugMode); + }; + const onStartCall = async () => { if (!web3Address) return; @@ -112,10 +120,18 @@ export const StartCall: React.FC = ({ }} >
Start a Web3 Call
- + {isNFTDebug && ( + + )} - - {web3Address && ( + {web3Address && (!isNFTDebug || !debugMode) && (
= ({
)} + {isNFTDebug && debugMode && ( + + )}
); }; diff --git a/src/hooks/use-params.ts b/src/hooks/use-params.ts index 97444cf1..6faed25e 100644 --- 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", }; });