Add support for support for image/webp in NFTAnimation

components/nftDetail/NFTAnimation.tsx

@@ -65,6 +65,8 @@ const NFTAnimation: React.FC<{ animationURL: string; animationType: string; imag
         />
       </>
     );
+  } else if (animationType?.startsWith('image/')) {
+    return <FallBackImg fallBackSrc={fallBackImage} src={animationURL as string} />;
   } else {
     return <FallBackImg fallBackSrc={fallBackImage} src={image as string} />;
   }

pages/collections/[address].tsx

@@ -38,14 +38,37 @@ const getCollectionName = async (address)=> {
   try {
     const endpoint = `${LOOPRING_API}${loopringApiEndpoints.collection}?collectionAddress=${address}`;
     const res = await fetch(endpoint).then((res) => res.json());
-    return {
-      name: res.name as string, 
-      avatar: res.avatar as string,
-      banner: res.banner as string,
-      nftType: res.nftType as string,
-      description: res.description as string
-    }
+    if (!res.name) throw new Error('Contract has no name function');
+
+    return extractCollectionData(res);
   } catch (error) {
+    return getCollectionMetadataFromFirstToken(address);
+  }
+};
+
+const extractCollectionData = async (res) => {
+  return {
+    name: res.name as string,
+    avatar: res.avatar as string,
+    banner: res.banner as string,
+    nftType: res.nftType as string,
+    description: res.description as string,
+  };
+};
+
+const getCollectionMetadataFromFirstToken = async (address) => {
+  try {
+    const endpoint = `${LOOPRING_API}${loopringApiEndpoints.collectionNFTs}?nftHash=${address}&id=0&limit=1&metadata=true`;
+    const { nftTokenInfos } = await fetch(endpoint).then((res) => res.json());
+    const {
+      metadata: { uri },
+    } = nftTokenInfos?.[0];
+
+    const { collection_metadata } = await fetch(uri).then((res) => res.json());
+    const res = await fetch(collection_metadata).then((res) => res.json());
+
+    return extractCollectionData(res);
+  } catch {
     return {};
   }
 };

utils/config.ts

@@ -22,7 +22,8 @@ export const apiEndpointByTxType = {
   accountUpdate: 'user/transactions',
 };
 export const loopringApiEndpoints = {
-  collection: 'nft/public/collection'
+  collection: 'nft/public/collection',
+  collectionNFTs: 'nft/public/collection/items',
 };
 
 export const NFT_DISALLOW_LIST = [];