From 865acd2ec7f58e6908b161e34f656f4e4c919086 Mon Sep 17 00:00:00 2001 From: spacehaz Date: Fri, 7 Apr 2023 20:08:57 +0200 Subject: [PATCH 1/4] update for image preview --- .../async-actions/get-erc1155-token-data.tsx | 9 ++++---- .../async-actions/get-erc721-token-data.tsx | 9 ++++---- src/helpers/get-alchemy-token-image.tsx | 21 +++++++++++++++++++ src/helpers/index.js | 2 ++ src/types/alchemy-nft-data.tsx | 7 +++++++ src/types/index.js | 2 ++ 6 files changed, 40 insertions(+), 10 deletions(-) create mode 100644 src/helpers/get-alchemy-token-image.tsx create mode 100644 src/types/alchemy-nft-data.tsx 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..fbb91d78 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,9 @@ 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) + console.log({ image }) + 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..113fe68d 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,9 @@ 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, From 4093b612b00cfabf9ad31ed1b6708e6ae71a1323 Mon Sep 17 00:00:00 2001 From: spacehaz Date: Fri, 7 Apr 2023 20:10:02 +0200 Subject: [PATCH 2/4] update for image preview --- .../store/reducers/drop/async-actions/get-erc721-token-data.tsx | 1 - 1 file changed, 1 deletion(-) 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 113fe68d..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 @@ -16,7 +16,6 @@ const getTokenData: TGetTokenERC721Data = async (provider, tokenAddress, tokenId const tokenData = await alchemy.nft.getNftMetadata(tokenAddress, tokenId) 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) From e40b04de7fa47ce56e99b8cd1c7625dadf566e97 Mon Sep 17 00:00:00 2001 From: spacehaz Date: Fri, 7 Apr 2023 20:18:26 +0200 Subject: [PATCH 3/4] update release version --- CHANGELOG.md | 3 +++ package.json | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) 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", From 702248a843d8768cf9d73738807b256612ed443d Mon Sep 17 00:00:00 2001 From: spacehaz Date: Fri, 7 Apr 2023 20:19:20 +0200 Subject: [PATCH 4/4] removed console --- .../store/reducers/drop/async-actions/get-erc1155-token-data.tsx | 1 - 1 file changed, 1 deletion(-) 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 fbb91d78..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 @@ -15,7 +15,6 @@ const getTokenData: TGetTokenERC1155Data = async (provider, tokenAddress, tokenI } const tokenData = await alchemy.nft.getNftMetadata(tokenAddress, tokenId) const image = await getAlchemyTokenImage(tokenData) - console.log({ image }) return { name: tokenData.title || 'ERC1155 Token', image, description: tokenData.description } } catch (err) { try {