From dbb5d93b23e8d6db40dd9d7389d992d81a22eb28 Mon Sep 17 00:00:00 2001 From: zhongqifeng <1121021693@qq.com> Date: Fri, 2 Feb 2024 18:50:36 +0800 Subject: [PATCH 1/4] fix: NFTCard Displayed images that should not be displayed after switch chain --- .changeset/pink-planes-wait.md | 5 +++ packages/web3/src/hooks/useNFT.ts | 18 +++++++++-- packages/web3/src/nft-card/NFTCard.tsx | 42 +++++++++++++++----------- 3 files changed, 45 insertions(+), 20 deletions(-) create mode 100644 .changeset/pink-planes-wait.md diff --git a/.changeset/pink-planes-wait.md b/.changeset/pink-planes-wait.md new file mode 100644 index 000000000..e4ad5db1b --- /dev/null +++ b/.changeset/pink-planes-wait.md @@ -0,0 +1,5 @@ +--- +'@ant-design/web3': patch +--- + +fix: NFTCard Displayed images that should not be displayed after switch chain diff --git a/packages/web3/src/hooks/useNFT.ts b/packages/web3/src/hooks/useNFT.ts index b73c1801a..0e06773af 100644 --- a/packages/web3/src/hooks/useNFT.ts +++ b/packages/web3/src/hooks/useNFT.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import type { NFTMetadata, Web3ConfigProviderProps } from '@ant-design/web3-common'; +import type { Chain, NFTMetadata, Web3ConfigProviderProps } from '@ant-design/web3-common'; import useProvider from './useProvider'; @@ -11,10 +11,21 @@ export default function useNFT( const [metadata, setMetadata] = useState({}); const [loading, setLoading] = useState(false); const [error, setError] = useState(); - const { getNFTMetadata: getNFTMetadataFunc } = useProvider({ + const { + getNFTMetadata: getNFTMetadataFunc, + availableChains, + chain, + } = useProvider({ getNFTMetadata, }); + const findChainIndex = (availableChains: Chain[], chain: Chain) => { + const index = availableChains?.findIndex((chainItem) => { + return chainItem?.id === chain?.id; + }); + return index + 1; + }; + useEffect(() => { if (!address || !tokenId) { return; @@ -26,6 +37,9 @@ export default function useNFT( tokenId: BigInt(tokenId), }) .then((data) => { + if (findChainIndex(availableChains as Chain[], chain as Chain) > 1) { + data.image = ''; + } setMetadata(data); }) .catch((err) => { diff --git a/packages/web3/src/nft-card/NFTCard.tsx b/packages/web3/src/nft-card/NFTCard.tsx index 5d248a2f4..33b6e2385 100644 --- a/packages/web3/src/nft-card/NFTCard.tsx +++ b/packages/web3/src/nft-card/NFTCard.tsx @@ -66,23 +66,24 @@ const CardSkeleton: React.FC{children}; }; -const NFTCard: React.FC = ({ - style, - antdImageProps, - className, - type = 'default', - address, - tokenId, - price, - like: likeConfig, - showAction, - actionText, - footer, - onActionClick, - getNFTMetadata, - locale, - ...metadataProps -}) => { +const NFTCard: React.FC = (props) => { + const { + style, + antdImageProps, + className, + type = 'default', + address, + tokenId, + price, + like: likeConfig, + showAction, + actionText, + footer, + onActionClick, + getNFTMetadata, + locale, + ...metadataProps + } = props; const { liked, totalLikes = 0, onLikeChange } = likeConfig || {}; const { token } = useToken(); const { metadata, loading } = useNFT(address, parseNumberToBigint(tokenId), getNFTMetadata); @@ -160,7 +161,12 @@ const NFTCard: React.FC = ({
{`#${tokenId}`}
) : null} {typeof image === 'string' ? ( - + ) : ( image )} From f2fb1ef9711d2437b15a76c9184e22b02bb05f9c Mon Sep 17 00:00:00 2001 From: zhongqifeng <1121021693@qq.com> Date: Sun, 4 Feb 2024 19:06:10 +0800 Subject: [PATCH 2/4] feat: modify code --- packages/web3/src/hooks/useNFT.ts | 19 +++---------------- packages/web3/src/nft-card/NFTCard.tsx | 6 +++--- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/web3/src/hooks/useNFT.ts b/packages/web3/src/hooks/useNFT.ts index 0e06773af..509a300c4 100644 --- a/packages/web3/src/hooks/useNFT.ts +++ b/packages/web3/src/hooks/useNFT.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import type { Chain, NFTMetadata, Web3ConfigProviderProps } from '@ant-design/web3-common'; +import type { NFTMetadata, Web3ConfigProviderProps } from '@ant-design/web3-common'; import useProvider from './useProvider'; @@ -11,21 +11,10 @@ export default function useNFT( const [metadata, setMetadata] = useState({}); const [loading, setLoading] = useState(false); const [error, setError] = useState(); - const { - getNFTMetadata: getNFTMetadataFunc, - availableChains, - chain, - } = useProvider({ + const { getNFTMetadata: getNFTMetadataFunc } = useProvider({ getNFTMetadata, }); - const findChainIndex = (availableChains: Chain[], chain: Chain) => { - const index = availableChains?.findIndex((chainItem) => { - return chainItem?.id === chain?.id; - }); - return index + 1; - }; - useEffect(() => { if (!address || !tokenId) { return; @@ -37,13 +26,11 @@ export default function useNFT( tokenId: BigInt(tokenId), }) .then((data) => { - if (findChainIndex(availableChains as Chain[], chain as Chain) > 1) { - data.image = ''; - } setMetadata(data); }) .catch((err) => { setError(err); + setMetadata({}); }) .finally(() => { setLoading(false); diff --git a/packages/web3/src/nft-card/NFTCard.tsx b/packages/web3/src/nft-card/NFTCard.tsx index 33b6e2385..60849adf2 100644 --- a/packages/web3/src/nft-card/NFTCard.tsx +++ b/packages/web3/src/nft-card/NFTCard.tsx @@ -88,9 +88,9 @@ const NFTCard: React.FC = (props) => { const { token } = useToken(); const { metadata, loading } = useNFT(address, parseNumberToBigint(tokenId), getNFTMetadata); const { - name = metadata.name, - image = metadata.image, - description = metadata.description, + name = metadata?.name, + image = metadata?.image, + description = metadata?.description, } = metadataProps; const { messages } = useIntl('NFTCard', locale); const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext); From afa67815b8e2b2d5d2217af32743acfc052ea27a Mon Sep 17 00:00:00 2001 From: zhongqifeng <1121021693@qq.com> Date: Sun, 18 Feb 2024 10:54:13 +0800 Subject: [PATCH 3/4] feat: add test code --- packages/web3/src/nft-card/__tests__/basic.test.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/web3/src/nft-card/__tests__/basic.test.tsx b/packages/web3/src/nft-card/__tests__/basic.test.tsx index f212b8e8b..b2cc89161 100644 --- a/packages/web3/src/nft-card/__tests__/basic.test.tsx +++ b/packages/web3/src/nft-card/__tests__/basic.test.tsx @@ -198,6 +198,18 @@ describe('NFTCard', () => { expect(imgEle?.src).toBe(imageUrl); expect(imgEle?.alt).toBe('test'); }); + it('render image when error address', () => { + const { baseElement } = render(); + + const imgEle = baseElement.querySelector( + '.ant-nft-card-content .ant-image-img', + ); + const fallBackUrl = + 'data:image/png;base64,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'; + + expect(imgEle).toBeTruthy(); + expect(imgEle?.src).toBe(fallBackUrl); + }); it('render image when pass react node', () => { const { baseElement } = render( From fbffee5108d73784d87746bb82d715f44bb000dc Mon Sep 17 00:00:00 2001 From: zhongqifeng <1121021693@qq.com> Date: Sun, 18 Feb 2024 15:10:23 +0800 Subject: [PATCH 4/4] feat: modify code --- packages/web3/src/nft-card/__tests__/basic.test.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/web3/src/nft-card/__tests__/basic.test.tsx b/packages/web3/src/nft-card/__tests__/basic.test.tsx index b2cc89161..306b8688a 100644 --- a/packages/web3/src/nft-card/__tests__/basic.test.tsx +++ b/packages/web3/src/nft-card/__tests__/basic.test.tsx @@ -198,8 +198,8 @@ describe('NFTCard', () => { expect(imgEle?.src).toBe(imageUrl); expect(imgEle?.alt).toBe('test'); }); - it('render image when error address', () => { - const { baseElement } = render(); + it('render image when error image', async () => { + const { baseElement } = render(); const imgEle = baseElement.querySelector( '.ant-nft-card-content .ant-image-img', @@ -208,7 +208,11 @@ describe('NFTCard', () => { 'data:image/png;base64,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'; expect(imgEle).toBeTruthy(); - expect(imgEle?.src).toBe(fallBackUrl); + await vi.waitFor(() => { + expect( + baseElement.querySelector('.ant-nft-card-content .ant-image-img')?.getAttribute('src'), + ).toBe(''); + }); }); it('render image when pass react node', () => {