change ipfs

Author: johnloopring

components/FallBackImg.tsx

@@ -0,0 +1,17 @@
+import { DetailedHTMLProps, ImgHTMLAttributes } from "react";
+
+const FallBackImg = (props: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> & { src: string; fallBackSrc: string }) => {
+  const {src, fallBackSrc, ...otherProps} = props
+  return (
+    <img
+      src={src}
+      onError={({ currentTarget }) => {
+        currentTarget.onerror = null; // prevents looping
+        currentTarget.src = fallBackSrc;
+      }}
+      {...otherProps}
+    />
+  );
+};
+
+export default FallBackImg;

components/NFT.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import useCachedNFT from "../hooks/useCachedNFT";
 import useConsentContext from "../hooks/useConsentContext";
 import { NFT_DISALLOW_LIST } from "../utils/config";
+import FallBackImg from "./FallBackImg";
 
 interface NFTData {
   id: string;
@@ -19,7 +20,7 @@ const NFT: React.FC<{ nft: NFTData }> = ({ nft }) => {
   const [isLoaded, setIsLoaded] = React.useState(false);
   const { hasConsent, askUserForConsent } = useConsentContext();
 
-  const { image, name } = metadata;
+  const { image, fallBackImage, name } = metadata;
   React.useEffect(() => {
     if (image && image === "/error") {
       setIsLoaded(true);
@@ -46,8 +47,9 @@ const NFT: React.FC<{ nft: NFTData }> = ({ nft }) => {
             className="top-0 right-0 h-full w-full object-contain object-center bg-white"
           />
         ) : (
-          <img
+          <FallBackImg
             src={image as string}
+            fallBackSrc={fallBackImage as string}
             alt={name as string}
             className={`z-10 object-cover object-center w-full ${
               NFT_DISALLOW_LIST.includes(nft.id) || !hasConsent

components/nftDetail/NFTAnimation.tsx

@@ -1,10 +1,12 @@
 import Script from 'next/script';
 import React from 'react';
+import FallBackImg from '../FallBackImg';
 
-const NFTAnimation: React.FC<{ animationURL: string; animationType: string; image: string }> = ({
+const NFTAnimation: React.FC<{ animationURL: string; animationType: string; image: string, fallBackImage: string }> = ({
   animationURL,
   animationType,
   image,
+  fallBackImage
 }) => {
   if (animationType?.startsWith('video')) {
     return (
@@ -31,7 +33,7 @@ const NFTAnimation: React.FC<{ animationURL: string; animationType: string; imag
   } else if (animationType?.startsWith('audio')) {
     return (
       <div className="z-10 h-full w-[400px] flex flex-col">
-        <img src={image as string} className="object-contain object-center" />
+        <FallBackImg src={image as string} fallBackSrc={fallBackImage} className="object-contain object-center" />
         <audio
           src={animationURL as string}
           controls
@@ -65,7 +67,7 @@ const NFTAnimation: React.FC<{ animationURL: string; animationType: string; imag
       </>
     );
   } else {
-    return <img src={image as string} />;
+    return <FallBackImg fallBackSrc={fallBackImage} src={image as string} />;
   }
 };
 

hooks/useCachedNFT.ts

@@ -3,12 +3,13 @@ import { ethers } from 'ethers';
 
 import { INFURA_ENDPOINT } from '../utils/config';
 import LRUCache from '../utils/cache';
+import { FALLBACK_IPFS_URL, IPFS_URL } from '../utils/nft';
 
 interface NFTMetadata {
   [index: string]: unknown;
 }
 
-const IPFS_URL = 'https://loopring.mypinata.cloud/ipfs/';
+// const IPFS_URL = 'https://ipfs.loopring.io/ipfs/';
 
 // Two caches need to maintained
 // NFT URI cache {key-> token_address:nft_id}
@@ -89,6 +90,7 @@ const getNFTURI = async (nft) => {
 };
 
 const getNFTMetadata = async (uri, nft, isErrorFallback = false) => {
+  
   const cacheKey = nft.id;
   let cacheResult = metadataCache.get(cacheKey);
   if (cacheResult) {
@@ -102,10 +104,17 @@ const getNFTMetadata = async (uri, nft, isErrorFallback = false) => {
       };
     }
     try {
-      const metadata = await fetch(uri.replace('ipfs://', IPFS_URL)).then((res) => res.json());
+      
+      const metadata = await fetch(uri.replace('ipfs://', IPFS_URL))
+      .catch(() => {
+        
+        return fetch(uri.replace('ipfs://', FALLBACK_IPFS_URL))
+      })
+      .then((res) => res.json());
       metadataCache.set(cacheKey, metadata);
       return metadata;
     } catch (error) {
+      
       if (!isErrorFallback) {
         return getNFTMetadata(`${uri}/metadata.json`, nft, true);
       }
@@ -132,7 +141,9 @@ const useCachedNFT = (nft) => {
             ...metadata,
             uri: uri?.replace('ipfs://', IPFS_URL),
             image: metadata?.image?.replace('ipfs://', IPFS_URL),
+            fallBackImage: metadata?.image?.replace('ipfs://', FALLBACK_IPFS_URL),
             animation_url: metadata?.animation_url?.replace('ipfs://', IPFS_URL),
+            fallBackAnimation_url: metadata?.animation_url?.replace('ipfs://', FALLBACK_IPFS_URL),
           });
       })();
     }

pages/nft/[id].tsx

@@ -10,6 +10,7 @@ import { INFURA_ENDPOINT, NFT_DISALLOW_LIST } from '../../utils/config';
 import useConsentContext from '../../hooks/useConsentContext';
 import { useNonFungibleTokenQuery } from '../../generated/loopringExplorer';
 import NFTAnimation from '../../components/nftDetail/NFTAnimation';
+import FallBackImg from '../../components/FallBackImg';
 
 const provider = new ethers.providers.JsonRpcProvider(INFURA_ENDPOINT);
 
@@ -42,7 +43,7 @@ const NFTDetail: React.FC<{}> = () => {
   const [hideConsentButton, setHideConsentButton] = React.useState<boolean>(false);
   const [animationType, setAnimationType] = React.useState<string>();
   const metadata = useCachedNFT(nft);
-  const { image, name, animation_url } = metadata;
+  const { image, name, animation_url, fallBackImage } = metadata;
 
   React.useEffect(() => {
     if (nft) {
@@ -54,10 +55,10 @@ const NFTDetail: React.FC<{}> = () => {
   }, [nft]);
 
   React.useEffect(() => {
-    if (image && image === '/error') {
+    if (image && image === '/error' && fallBackImage && fallBackImage === '/error') {
       setIsLoaded(true);
     }
-  }, [image]);
+  }, [image, fallBackImage]);
 
   React.useEffect(() => {
     if (animation_url) {
@@ -94,21 +95,23 @@ const NFTDetail: React.FC<{}> = () => {
               animationURL={animation_url as string}
               animationType={animationType}
               image={image as string}
+              fallBackImage={fallBackImage as string}
             />
           ) : animation_url === '/error' ? (
             <img
               src="/nft-error.svg"
               className="top-0 right-0 h-full w-full object-contain object-center bg-white rounded-xl"
             />
-          ) : image ? (
-            image === '/error' ? (
+          ) : (image || fallBackImage) ? (
+            (image === '/error' && fallBackImage === '/error') ? (
               <img
                 src="/nft-error.svg"
                 className="top-0 right-0 h-full w-full object-contain object-center bg-white rounded-xl"
               />
             ) : (
-              <img
+              <FallBackImg
                 src={image as string}
+                fallBackSrc={fallBackImage as string}
                 alt={name as string}
                 className={`z-10 object-contain object-center m-auto h-full rounded-xl ${
                   NFT_DISALLOW_LIST.includes(nft.id) || !hasConsent ? 'filter blur-xl' : ''

utils/nft.ts

@@ -8,7 +8,8 @@ export interface NFTInfo {
   nftType: number
 }
 
-export const IPFS_URL = 'https://loopring.mypinata.cloud/ipfs/';
+export const IPFS_URL = 'https://ipfs.loopring1.io/ipfs/';
+export const FALLBACK_IPFS_URL = 'https://ipfs.io/ipfs/';
 
 // Two caches need to maintained
 // NFT URI cache {key-> token_address:nft_id}