diff --git a/CHANGELOG.md b/CHANGELOG.md index f59a661a..17c47b74 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 89f8c64b..84d9d974 100644 --- a/package.json +++ b/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", diff --git a/src/data/store/reducers/drop/async-actions/get-erc1155-token-data.tsx b/src/data/store/reducers/drop/async-actions/get-erc1155-token-data.tsx index 434dc394..f8578a4b 100644 --- a/src/data/store/reducers/drop/async-actions/get-erc1155-token-data.tsx +++ b/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 @@ -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) diff --git a/src/data/store/reducers/drop/async-actions/get-erc721-token-data.tsx b/src/data/store/reducers/drop/async-actions/get-erc721-token-data.tsx index 185bbf26..5717882f 100644 --- a/src/data/store/reducers/drop/async-actions/get-erc721-token-data.tsx +++ b/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 @@ -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) diff --git a/src/helpers/get-alchemy-token-image.tsx b/src/helpers/get-alchemy-token-image.tsx new file mode 100644 index 00000000..ff12dee8 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/helpers/index.js b/src/helpers/index.js index 09c4e12d..7e980e81 100644 --- a/src/helpers/index.js +++ b/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, diff --git a/src/types/alchemy-nft-data.tsx b/src/types/alchemy-nft-data.tsx new file mode 100644 index 00000000..2cd0c66c --- /dev/null +++ b/src/types/alchemy-nft-data.tsx @@ -0,0 +1,7 @@ +export type TAlchemyNFTData = { + rawMetadata?: { + image?: string + animation_url?: string + } + media?: { raw?: string }[] +} \ No newline at end of file diff --git a/src/types/index.js b/src/types/index.js index 36b257e5..cdfdedad 100644 --- a/src/types/index.js +++ b/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,