Avatar selection bug fix for Web3 Brave Talk (#1164)

* adding inital fix

* changing NFT border selection from imageurl comp to id comp

* chaged indexFind

* debug messages in prod only

---------

Co-authored-by: David Suh <davidsuh@Davids-MacBook-Pro.local>

src/components/web3/JoinCall.tsx

@@ -63,7 +63,7 @@ export const JoinCall: React.FC<Props> = ({
     if (!web3Address) return;
 
     try {
-      rememberAvatarUrl(nft);
+      rememberAvatarUrl(nft != null ? nft.image_url : "");
       setFeedbackMessage("join_call");
       const result = await joinCall(roomName);
       if (result) {

src/components/web3/OptionalSettings.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { POAP, NFTcollection, NFT } from "./core";
+import { isProduction } from "../../environment";
 import { ExapandablePanel } from "./ExpandablePanel";
 import { NonExapandablePanel } from "./NonExpandablePanel";
 import { SelectableImageList } from "./SelectableImageList";
@@ -15,8 +16,8 @@ interface Props {
   nfts?: NFT[];
   poaps?: POAP[];
   nftCollections?: NFTcollection[];
-  nft: string | null;
-  setNft: (nft: string) => void;
+  nft: NFT | null;
+  setNft: (nft: NFT | null) => void;
   permissionType: string;
   setPermissionType: (permissionType: Web3PermissionType) => void;
   participantPoaps: POAP[];
@@ -52,14 +53,17 @@ export const OptionalSettings: React.FC<Props> = ({
   setModeratorNFTCollections,
 }) => {
   const nftItems = nfts.map((n: NFT) => ({ ...n, imageUrl: n.image_url }));
-  const selectedNftIdx = nfts.findIndex((n) => n.image_url === nft);
+  const selectedNftIdx = nfts.findIndex((n) => nft != null && n.id === nft.id);
   const { t } = useTranslation();
   const onToggle = (idx: number) => {
-    const imageUrl = nfts[idx].image_url;
-    if (nft === imageUrl) {
-      setNft("");
+    const selectedId = nfts[idx].id;
+    if (nft != null && nft.id === selectedId) {
+      setNft(null);
+      if (!isProduction) console.log("debug: NFT deselected");
     } else {
-      setNft(imageUrl);
+      setNft(nfts[idx]);
+      if (!isProduction)
+        console.log(`debug: NFT #${idx} [${nfts[idx].name}] selected.`);
     }
   };
 

src/components/web3/SelectableImageList.tsx

@@ -27,14 +27,14 @@ export const SelectableImageList: React.FC<Props> = ({
   const showCheckbox = items.some(
     (item) => item.collection !== undefined && item.collection.spam_score >= 80
   );
-
+  const itemsIndexed: [Item, number][] = items.map((item, idx) => [item, idx]);
   const [showSpamItems, setShowSpamItems] = useState(false);
 
   const filteredItems = showSpamItems
-    ? items
-    : items.filter((item) => {
-        if (item.collection?.spam_score !== undefined) {
-          return item.collection.spam_score < 80;
+    ? itemsIndexed
+    : itemsIndexed.filter((item) => {
+        if (item[0].collection?.spam_score !== undefined) {
+          return item[0].collection.spam_score < 80;
         }
         return true;
       });
@@ -63,18 +63,18 @@ export const SelectableImageList: React.FC<Props> = ({
         {filteredItems.map((item, idx) => (
           <div
             key={idx}
-            onClick={() => onToggleSelection(idx)}
+            onClick={() => onToggleSelection(item[1])}
             css={{ padding: "5px 5px 5px 0" }}
-            title={item.name}
+            title={item[0].name}
           >
             <img
-              title={item.name}
+              title={item[0].name}
               height={167}
               width={167}
-              src={item.imageUrl ? item.imageUrl : noNftImage}
+              src={item[0].imageUrl ? item[0].imageUrl : noNftImage}
               css={{
                 border: `5px solid ${
-                  selectedIdxs.includes(idx) ? "white" : "transparent"
+                  selectedIdxs.includes(item[1]) ? "white" : "transparent"
                 }`,
               }}
               alt="item"

src/components/web3/StartCall.tsx

@@ -83,7 +83,7 @@ export const StartCall: React.FC<Props> = ({
     if (!web3Address) return;
 
     try {
-      rememberAvatarUrl(nft);
+      rememberAvatarUrl(nft != null ? nft.image_url : "");
       const result = await startCall();
       if (result) {
         const [roomName, jwt, web3Authentication] = result;

src/components/web3/api.ts

@@ -94,6 +94,7 @@ export const web3NFTs = async (address: string): Promise<NFT[]> => {
           ? nft.previews.image_small_url
           : nft.image_url,
         name: nft.name,
+        id: nft.nft_id,
         collection: {
           collection_id: nft.collection?.collection_id,
           name: nft.collection?.name,

src/components/web3/core.ts

@@ -18,6 +18,7 @@ export interface NFTcollection {
 export interface NFT {
   image_url: string;
   name: string;
+  id: string;
   collection?: {
     collection_id: string;
     name: string;

src/hooks/use-web3-call-state.ts

@@ -6,21 +6,21 @@ import {
   web3Prove,
   Web3PermissionType,
 } from "../components/web3/api";
-import { POAP, NFTcollection } from "../components/web3/core";
+import { POAP, NFTcollection, NFT } from "../components/web3/core";
 import { generateRoomName } from "../lib";
 import { fetchJWT } from "../rooms";
 
 interface Web3CallState {
   web3Address?: string;
   permissionType: Web3PermissionType;
-  nft: string | null;
+  nft: NFT | null;
   participantPoaps: POAP[];
   moderatorPoaps: POAP[];
   participantNFTCollections: NFTcollection[];
   moderatorNFTCollections: NFTcollection[];
   setWeb3Address: (web3Address: string, event: string) => void;
   setPermissionType: (permissionType: Web3PermissionType) => void;
-  setNft: (nft: string) => void;
+  setNft: (nft: NFT | null) => void;
   setParticipantPoaps: (participanPoaps: POAP[]) => void;
   setModeratorPoaps: (moderatorPoaps: POAP[]) => void;
   setParticipantNFTCollections: (
@@ -41,7 +41,7 @@ export function useWeb3CallState(
   const [web3Address, _setWeb3Address] = useState<string>();
   const [permissionType, setPermissionType] =
     useState<Web3PermissionType>("NFT-collection");
-  const [nft, setNft] = useState<string | null>(null);
+  const [nft, setNft] = useState<NFT | null>(null);
   const [participantPoaps, setParticipantPoaps] = useState<POAP[]>([]);
   const [moderatorPoaps, setModeratorPoaps] = useState<POAP[]>([]);
   const [participantNFTCollections, setParticipantNFTCollections] = useState<
@@ -83,7 +83,7 @@ export function useWeb3CallState(
       auth = await web3Prove(web3Address as string);
       web3 = {
         web3Authentication: auth,
-        avatarURL: nft,
+        avatarURL: nft != null ? nft.image_url : "",
       };
     } catch (e: any) {
       console.error(e.message);
@@ -164,7 +164,7 @@ export function useWeb3CallState(
             },
           },
         },
-        avatarURL: nft,
+        avatarURL: nft != null ? nft.image_url : "",
       };
 
       const { jwt } = await fetchJWT(roomName, true, setFeedbackMessage, web3);