Merge pull request #52 from LinkdropHQ/dev

Dev

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Linkdrop Claim app
 
+## 2.2.2
+- Added helper to resolve metadata image for ERC1155/ERC721
+
 ## 2.2.1
 - Alchemy API added
 - ERC20 claim flow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-claim",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.4.0",

src/data/store/reducers/drop/async-actions/get-erc1155-token-data.tsx

@@ -1,10 +1,8 @@
 import { ERC1155Contract } from 'abi'
 import { getERC1155TokenData } from 'data/api'
 import { ethers } from 'ethers'
-import { IPFSRedefineUrl } from 'helpers'
-import { getValidImage } from 'helpers'
+import { getValidImage, getAlchemyTokenImage, createAlchemyInstance, IPFSRedefineUrl } from 'helpers'
 import tokenPlaceholder from 'images/token-placeholder.png'
-import { createAlchemyInstance } from 'helpers'
 
 type TTokenERC1155Data = { name: string, image: string, description: string }
 type TGetTokenERC1155Data = (provider: any, tokenAddress: string, tokenId: string, chainId: number | null) => Promise<TTokenERC1155Data>
@@ -16,8 +14,8 @@ const getTokenData: TGetTokenERC1155Data = async (provider, tokenAddress, tokenI
       throw new Error('No Alchemy instance is created')
     }
     const tokenData = await alchemy.nft.getNftMetadata(tokenAddress, tokenId)
-    const image = tokenData.media && tokenData.media[0] && tokenData.media[0].raw && await getValidImage(tokenData.media[0].raw)
-    return { name: tokenData.title || 'ERC1155 Token', image: image || tokenPlaceholder, description: tokenData.description }
+    const image = await getAlchemyTokenImage(tokenData)
+    return { name: tokenData.title || 'ERC1155 Token', image, description: tokenData.description }
   } catch (err) {
     try {
       const contractInstance = await new ethers.Contract(tokenAddress, ERC1155Contract, provider)

src/data/store/reducers/drop/async-actions/get-erc721-token-data.tsx

@@ -1,10 +1,8 @@
 import { ERC721Contract } from 'abi'
 import { getERC721TokenData } from 'data/api'
 import { ethers } from 'ethers'
-import { IPFSRedefineUrl } from 'helpers'
 import tokenPlaceholder from 'images/token-placeholder.png'
-import { getValidImage } from 'helpers'
-import { createAlchemyInstance } from 'helpers'
+import { getValidImage, getAlchemyTokenImage, createAlchemyInstance, IPFSRedefineUrl } from 'helpers'
 
 type TTokenERC721Data = { name: string, image: string, description: string }
 type TGetTokenERC721Data = (provider: any, tokenAddress: string, tokenId: string, chainId: number | null) => Promise<TTokenERC721Data>
@@ -16,8 +14,8 @@ const getTokenData: TGetTokenERC721Data = async (provider, tokenAddress, tokenId
       throw new Error('No Alchemy instance is created')
     }
     const tokenData = await alchemy.nft.getNftMetadata(tokenAddress, tokenId)
-    const image = tokenData.media && tokenData.media[0] && tokenData.media[0].raw && await getValidImage(tokenData.media[0].raw)
-    return { name: tokenData.title || 'ERC721 Token', image: image || tokenPlaceholder, description: tokenData.description }
+    const image = await getAlchemyTokenImage(tokenData)
+    return { name: tokenData.title || 'ERC721 Token', image, description: tokenData.description }
   } catch (err) {
     try {
       const contractInstance = await new ethers.Contract(tokenAddress, ERC721Contract, provider)

src/helpers/get-alchemy-token-image.tsx

@@ -0,0 +1,21 @@
+import tokenPlaceholder from 'images/token-placeholder.png'
+import { TAlchemyNFTData } from 'types'
+import { getValidImage } from 'helpers'
+
+const getAlchemyTokenImage = async (tokenData: TAlchemyNFTData) => {
+  if (tokenData.rawMetadata) {
+    if (tokenData.rawMetadata.image) {
+      const image = await getValidImage(tokenData.rawMetadata.image)
+      return image || tokenPlaceholder
+    }
+    if (tokenData.rawMetadata.animation_url) {
+      const image = await getValidImage(tokenData.rawMetadata.animation_url)
+      return image || tokenPlaceholder
+    }
+  } else if (tokenData.media && tokenData.media[0] && tokenData.media[0].raw) {
+    const image = await getValidImage(tokenData.media[0].raw)
+    return image || tokenPlaceholder
+  }
+  return tokenPlaceholder
+}
+export default getAlchemyTokenImage

src/helpers/index.js

@@ -26,8 +26,10 @@ import getWalletDeeplink from './get-wallet-deeplink'
 import sortWallets from './sort-wallets'
 import defineAlchemyNetwork from './define-alchemy-network'
 import createAlchemyInstance from './create-alchemy-instance'
+import getAlchemyTokenImage from './get-alchemy-token-image'
 
 export {
+  getAlchemyTokenImage,
   sortWallets,
   createAlchemyInstance,
   defineAlchemyNetwork,

src/types/alchemy-nft-data.tsx

@@ -0,0 +1,7 @@
+export type TAlchemyNFTData = {
+  rawMetadata?: {
+    image?: string
+    animation_url?: string
+  }
+  media?: { raw?: string }[]
+}

src/types/index.js

@@ -19,8 +19,10 @@ import { TLinkParams } from './link-params'
 import TWalletName from './wallet-name'
 import { TWalletOption } from './wallet-option'
 import TTokenERC20Data from './token-erc20-data'
+import { TAlchemyNFTData } from './alchemy-nft-data'
 
 export {
+  TAlchemyNFTData,
   TTokenERC20Data,
   TMerkleTree,
   TWalletName,