fix: implement feedbacks from review

lfglabs-dev · Oct 5, 2023 · 83672f7 · 83672f7
1 parent 8fa9204
commit 83672f7
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 87 deletions.
diff --git a/components/UI/modalProfilePic.tsx b/components/UI/modalProfilePic.tsx
@@ -15,6 +15,7 @@ import {
 import { Call } from "starknet";
 import registerCalls from "../../utils/registerCalls";
 import { hexToDecimal } from "../../utils/feltService";
+import { getImgUrl } from "../../utils/stringService";
 
 type ModalProfilePicProps = {
   closeModal: () => void;
@@ -38,11 +39,8 @@ const ModalProfilePic: FunctionComponent<ModalProfilePicProps> = ({
     calls: callData,
   });
 
-  console.log("calls", callData);
-
   useEffect(() => {
     if (!nft) return;
-    console.log("nft", nft);
     const nft_id = nft.token_id;
     setCallData([
       registerCalls.updateProfilePicture(
@@ -92,17 +90,7 @@ const ModalProfilePic: FunctionComponent<ModalProfilePicProps> = ({
         <p className={ppStyles.modalTitle}>Do you want to add this NFT?</p>
         {nft?.image_url ? (
           <div className={ppStyles.nftImg}>
-            <img
-              src={
-                nft.image_url.startsWith("ipfs://")
-                  ? nft.image_url.replace(
-                      "ipfs://",
-                      "https://gateway.pinata.cloud/ipfs/"
-                    )
-                  : nft.image_url
-              }
-              alt={`Image of ${nft.name}`}
-            />
+            <img src={getImgUrl(nft.image_url)} alt={`Image of ${nft.name}`} />
           </div>
         ) : null}
         <div className={ppStyles.modalActions}>

diff --git a/components/UI/nftCard.tsx b/components/UI/nftCard.tsx
@@ -3,6 +3,7 @@ import styles from "../../styles/components/profilePic.module.css";
 import theme from "../../styles/theme";
 import AddIcon from "./iconsComponents/icons/addIcon";
 import { useMediaQuery } from "@mui/material";
+import { getImgUrl } from "../../utils/stringService";
 
 type NftCardProps = {
   image: string;
@@ -15,23 +16,9 @@ const NftCard: FunctionComponent<NftCardProps> = ({
   name,
   selectPicture,
 }) => {
-  const [imageUri, setImageUri] = useState<string>("");
   const [isHovered, setIsHovered] = useState<boolean>(false);
   const isMobile = useMediaQuery("(max-width:425px)");
 
-  useEffect(() => {
-    if (!image) return;
-    if (image.startsWith("ipfs://")) {
-      setImageUri(
-        image.replace("ipfs://", "https://gateway.pinata.cloud/ipfs/")
-      );
-    } else {
-      setImageUri(image);
-    }
-  }, [image]);
-
-  if (!image) return null;
-
   return (
     <div
       className={styles.nftCard}
@@ -43,7 +30,7 @@ const NftCard: FunctionComponent<NftCardProps> = ({
           className={styles.nftImg}
           onClick={() => isMobile && selectPicture()}
         >
-          <img src={imageUri} alt={`Image of ${name}`} />
+          <img src={getImgUrl(image)} alt={`Image of ${name}`} />
         </div>
       ) : (
         <div className={styles.nftHovered} onClick={selectPicture}>

diff --git a/components/identities/updateProfilePic.tsx b/components/identities/updateProfilePic.tsx
@@ -5,6 +5,7 @@ import theme from "../../styles/theme";
 import { hexToDecimal } from "../../utils/feltService";
 import NftCard from "../UI/nftCard";
 import ModalProfilePic from "../UI/modalProfilePic";
+import { filterAssets, retrieveAssets } from "../../utils/nftService";
 
 type UpdateProfilePicProps = {
   identity?: Identity;
@@ -26,27 +27,9 @@ const UpdateProfilePic: FunctionComponent<UpdateProfilePicProps> = ({
   const [selectedPic, setSelectedPic] = useState<StarkscanNftProps | null>(
     null
   );
-  const whitelistedContracts = [
-    // Starknet Quest contracts
-    hexToDecimal(
-      "0x0154520b48b692bb8b926434bbd24d797e806704af28b6cdcea30ea7db6a996b"
-    ),
-    // Identicons
-    hexToDecimal(
-      "0x0783a9097b26eae0586373b2ce0ed3529ddc44069d1e0fbc4f66d42b69d6850d"
-    ),
-    // Braavos shield
-    hexToDecimal(
-      "0x04353bb6424de0b468ec4c984e01637fb2fafd3bdf81f4af367077fcbb9382c1"
-    ),
-    // Briq
-    hexToDecimal(
-      "0x01435498bf393da86b4733b9264a86b58a42b31f8d8b8ba309593e5c17847672"
-    ),
-    // Eykar
-    hexToDecimal(
-      "0x041e1382e604688da7f22e7fbb6113ba3649b84a87b58f4dc1cf5bfa96dfc2cf"
-    ),
+  const whitelistedContracts: string[] = [
+    hexToDecimal(process.env.NEXT_PUBLIC_STARKNETID_CONTRACT),
+    hexToDecimal(process.env.NEXT_PUBLIC_NFT_SQ_CONTRACT),
   ];
 
   useEffect(() => {
@@ -55,46 +38,11 @@ const UpdateProfilePic: FunctionComponent<UpdateProfilePicProps> = ({
       `${process.env.NEXT_PUBLIC_SERVER_LINK}/starkscan/fetch_nfts`,
       identity.addr
     ).then((data) => {
-      console.log(data.data);
-      filterAssets(data.data);
+      const filteredAssets = filterAssets(data.data, whitelistedContracts);
+      setUserNft(filteredAssets);
     });
   }, [tokenId, identity]);
 
-  // Retrieve assets from Starkscan API
-  const retrieveAssets = async (
-    url: string,
-    addr: string,
-    accumulatedAssets: StarkscanNftProps[] = []
-  ): Promise<StarkscanApiResult> => {
-    return fetch(`${url}?addr=${addr}`)
-      .then((res) => res.json())
-      .then((data) => {
-        const assets = [...accumulatedAssets, ...data.data];
-        if (data.next_url) {
-          return retrieveAssets(
-            `${url}?addr=${addr}&next_url=${data.next_url}`,
-            addr,
-            assets
-          );
-        } else {
-          return {
-            data: assets,
-          };
-        }
-      });
-  };
-
-  // Filter assets received from Starkscan API & filter solo buildings represented on the land
-  const filterAssets = async (assets: StarkscanNftProps[]) => {
-    const filteredAssets: StarkscanNftProps[] = [];
-    assets.forEach((asset: StarkscanNftProps) => {
-      if (whitelistedContracts.includes(hexToDecimal(asset.contract_address))) {
-        filteredAssets.push(asset);
-      }
-    });
-    setUserNft(filteredAssets);
-  };
-
   const selectPicture = (nft: StarkscanNftProps) => {
     setOpenModal(true);
     setSelectedPic(nft);
@@ -119,6 +67,7 @@ const UpdateProfilePic: FunctionComponent<UpdateProfilePicProps> = ({
           <div className={styles.nftSection}>
             {userNft && userNft.length > 0 ? (
               userNft.map((nft, index) => {
+                if (!nft.image_url) return null;
                 return (
                   <NftCard
                     key={index}

diff --git a/tests/utils/stringService.test.js b/tests/utils/stringService.test.js
@@ -22,6 +22,7 @@ import {
   convertNumberToFixedLengthString,
   isValidDomain,
   getDomainLength,
+  getImgUrl,
 } from "../../utils/stringService";
 
 describe("Should test is1234Domain", () => {
@@ -410,3 +411,17 @@ describe("Should test getDomainLength function", () => {
     expect(getDomainLength("")).toEqual(0);
   });
 });
+
+describe("Should test getImgUrl function", () => {
+  it("Should return the same image url", () => {
+    expect(getImgUrl("https://myimage.png")).toEqual("https://myimage.png");
+  });
+
+  it("Should return the correct image url if it's an image stored on ipfs", () => {
+    expect(getImgUrl("ipfs://myimage")).toEqual("https://gateway.pinata.cloud/ipfs/myimage");
+  });
+
+  it("Should return an empty string for an empty image url", () => {
+    expect(getImgUrl("")).toEqual("");
+  });
+});
diff --git a/utils/nftService.ts b/utils/nftService.ts
@@ -0,0 +1,39 @@
+import { hexToDecimal } from "./feltService";
+
+// Retrieve assets from Starkscan API
+export const retrieveAssets = async (
+  url: string,
+  addr: string,
+  accumulatedAssets: StarkscanNftProps[] = []
+): Promise<StarkscanApiResult> => {
+  return fetch(`${url}?addr=${addr}`)
+    .then((res) => res.json())
+    .then((data) => {
+      const assets = [...accumulatedAssets, ...data.data];
+      if (data.next_url) {
+        return retrieveAssets(
+          `${url}?addr=${addr}&next_url=${data.next_url}`,
+          addr,
+          assets
+        );
+      } else {
+        return {
+          data: assets,
+        };
+      }
+    });
+};
+
+// Filter assets based on a whitelisted array of contract addresses
+export const filterAssets = (
+  assets: StarkscanNftProps[],
+  whitelist: string[]
+): StarkscanNftProps[] => {
+  const filteredAssets: StarkscanNftProps[] = [];
+  assets.forEach((asset: StarkscanNftProps) => {
+    if (whitelist.includes(hexToDecimal(asset.contract_address))) {
+      filteredAssets.push(asset);
+    }
+  });
+  return filteredAssets;
+};
diff --git a/utils/stringService.ts b/utils/stringService.ts
@@ -1,5 +1,6 @@
 import { BN } from "bn.js";
 import { basicAlphabet } from "./constants";
+import { hexToDecimal } from "./feltService";
 
 export function minifyAddress(address: string | undefined): string {
   if (!address) return "";
@@ -164,3 +165,11 @@ export function isValidDomain(domain: string | undefined): boolean | string {
   for (const char of domain) if (!basicAlphabet.includes(char)) return char;
   return true;
 }
+
+export function getImgUrl(image: string): string {
+  if (image.startsWith("ipfs://")) {
+    return image.replace("ipfs://", "https://gateway.pinata.cloud/ipfs/");
+  } else {
+    return image;
+  }
+}