fix: ipfs double string issue on use ipfs image hook (#333)

* fix: ipfs double string issue on use ipfs image hook * fix: undefined cid issue * fix: unnecessary if statement
bosonprotocol · Oct 18, 2022 · 44e0546 · 44e0546
1 parent ab3c93c
commit 44e0546
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/src/components/productCard/ProductCard.tsx b/src/components/productCard/ProductCard.tsx
@@ -55,7 +55,7 @@ export default function ProductCard({
   });
   const [lens] = lensProfiles;
   const { imageSrc: avatar } = useGetIpfsImage(getLensProfilePictureUrl(lens));
-  const { imageStatus, imageSrc } = useGetIpfsImage(offer.metadata.imageUrl);
+  const { imageStatus, imageSrc } = useGetIpfsImage(offer?.metadata?.imageUrl);
   const isCustomStoreFront = useCustomStoreQueryParameter("isCustomStoreFront");
   const location = useLocation();
   const navigate = useKeepQueryParamsNavigate();

diff --git a/src/components/ui/Image.tsx b/src/components/ui/Image.tsx
@@ -91,7 +91,7 @@ const Image: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
 
   useEffect(() => {
     async function fetchData(src: string) {
-      if (ipfsMetadataStorage) {
+      if (ipfsMetadataStorage && !src?.includes("undefined")) {
         const fetchPromises = await ipfsMetadataStorage.get(src, false);
         const [image] = await Promise.all([fetchPromises]);
         const base64str = await blobToBase64(new Blob([image as BlobPart]));
@@ -102,6 +102,9 @@ const Image: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
         } else {
           setImageSrc(base64str as string);
         }
+      } else {
+        setIsLoaded(true);
+        setIsError(true);
       }
     }
     if (!isLoaded && imageSrc === null) {

diff --git a/src/lib/utils/hooks/useGetIpfsImage.ts b/src/lib/utils/hooks/useGetIpfsImage.ts
@@ -16,7 +16,7 @@ export function useGetIpfsImage(src: string) {
       return;
     }
     async function fetchData(src: string) {
-      if (ipfsMetadataStorage) {
+      if (ipfsMetadataStorage && !src?.includes("undefined")) {
         setImageStatus(ProgressStatus.LOADING);
         const fetchPromises = await ipfsMetadataStorage.get(src, false);
         const [image] = await Promise.all([fetchPromises]);
@@ -28,14 +28,18 @@ export function useGetIpfsImage(src: string) {
           setImageSrc(base64str as string);
           setImageStatus(ProgressStatus.SUCCESS);
         }
+      } else {
+        setImageStatus(ProgressStatus.ERROR);
       }
     }
     if (
       [ProgressStatus.IDLE, ProgressStatus.LOADING].includes(imageStatus) &&
       !imageSrc
     ) {
       if (src?.includes("ipfs://")) {
-        fetchData(src);
+        const newString = src.split("//");
+        const CID = newString[newString.length - 1];
+        fetchData(`ipfs://${CID}`);
       } else {
         setImageSrc(src);
         setImageStatus(ProgressStatus.SUCCESS);