Fix for high spam scores #1088 and lock wallet #1089

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 NFTs with Less Spam Score"}
+          </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/StartCall.tsx

@@ -82,7 +82,7 @@ export const StartCall: React.FC<Props> = ({
           setFeedbackMessage("identifier_fetch_error");
         });
     }
-  }, [web3Address]);
+  }, [web3Address, web3Account]);
 
   const onStartCall = async () => {
     if (!web3Address) return;

src/components/web3/api.ts

@@ -63,14 +63,14 @@ export const web3Login = async (): Promise<string> => {
 };
 
 export const web3LoginSol = async (): Promise<string> => {
-  try{
+  try {
     const result = await window.braveSolana.connect();
     console.log("!!! allAddresses", result);
     return result.publicKey.toBase58();
-  }catch{
-      const result = await window.phantom.solana.connect();
-      console.log("!!! allAddresses", result);
-      return result.publicKey.toBase58();
+  } catch {
+    const result = await window.phantom.solana.connect();
+    console.log("!!! allAddresses", result);
+    return result.publicKey.toBase58();
   }
 };
 
@@ -99,12 +99,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
@@ -114,6 +108,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,
         },
       });
     });
@@ -272,9 +267,9 @@ export const web3SolProve = async (
   const payloadBytes = new TextEncoder().encode(payload);
   const { hexlify } = await import("ethers");
   const hexPayload = hexlify(payloadBytes);
-  try{
+  try {
     const { publicKey, signature } = await window.braveSolana.signMessage(
-    payloadBytes
+      payloadBytes
     );
     const result = {
       method: "CAIP-122-json",
@@ -283,12 +278,12 @@ export const web3SolProve = async (
         signature: Buffer.from(signature).toString("hex"),
         payload: hexPayload,
       },
-    }; 
+    };
     return result;
-  }catch {
+  } catch {
     const { publicKey, signature } = await window.phantom.solana.signMessage(
       payloadBytes
-      );
+    );
     const result = {
       method: "CAIP-122-json",
       proof: {
@@ -297,8 +292,8 @@ export const web3SolProve = async (
         payload: hexPayload,
       },
     };
-    
-    return result;  
+
+    return result;
   }
 };
 

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;

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

@@ -73,13 +73,16 @@ export function useWeb3CallState(
     });
   };
 
-  window.ethereum?.on("accountsChanged", (accounts: string[]) => {
-    console.log("!!! ETH accountsChanged", accounts);
-    setWeb3Account("ETH");
-    setWeb3Address(accounts[0], "accountsChanged");
-  });
+  if (web3Account === "ETH") {
+    window.ethereum?.on("accountsChanged", (accounts: string[]) => {
+      console.log("!!! ETH accountsChanged", accounts);
+      setWeb3Account("ETH");
+      setWeb3Address(accounts[0], "accountsChanged");
+    });
+  }
 
-  try{
+
+  try {
     window.braveSolana?.on("accountChanged", (account: any) => {
       setWeb3Account("SOL");
       if (account) {
@@ -89,12 +92,12 @@ export function useWeb3CallState(
         console.log("!!! SOL accountChanged", account);
         setWeb3Address(account, "accountsChanged");
       }
-    });  
-  }catch{
-    console.warn("!!! Brave Wallet does not exists")
+    });
+  } catch {
+    console.warn("!!! Brave Wallet does not exists");
   }
 
-  try{
+  try {
     window.phantom?.solana.on("accountChanged", (account: any) => {
       setWeb3Account("SOL");
       console.log(account);
@@ -106,8 +109,8 @@ export function useWeb3CallState(
         setWeb3Address(account, "accountsChanged");
       }
     });
-  }catch {
-    console.warn("!!! Phantom Wallet does not exists")
+  } catch {
+    console.warn("!!! Phantom Wallet does not exists");
   }
 
   const joinCall = async (