const { nft: propNft, contractId: propContractId, tokenId: propTokenId, className: propClassName, style, alt, thumbnail, fallbackUrl, loadingUrl = "https://ipfs.near.social/ipfs/bafkreidoxgv2w7kmzurdnmflegkthgzaclgwpiccgztpkfdkfzb4265zuu", } = props; const [state, setState] = useState({ contractId: propNft?.contractId || propContractId, tokenId: propNft?.tokenId || propTokenId, imageUrl: null, oldUrl: null, }); useEffect(() => { if (propContractId !== state.contractId || propTokenId !== state.tokenId) { setState({ contractId: propContractId, tokenId: propTokenId, imageUrl: null, }); } }, [propContractId, propTokenId, state.contractId, state.tokenId]); // ... (rest of the logic regarding fetching data from Near remains unchanged) const replaceIpfs = useCallback( (imageUrl) => { const rex = /^(?:https?:\/\/)(?:[^\/]+\/ipfs\/)?(Qm[1-9A-HJ-NP-Za-km-z]{44,}|b[A-Za-z2-7]{58,}|B[A-Z2-7]{58,}|z[1-9A-HJ-NP-Za-km-z]{48,}|F[0-9A-F]{50,})(?:\.[^\/]+)?(\/.*)?$/g; if (state.oldUrl !== imageUrl && imageUrl) { const match = rex.exec(imageUrl); if (match) { const newImageUrl = `https://ipfs.near.social/ipfs/${match[1]}${ match[2] || "" }`; if (newImageUrl !== imageUrl) { setState((prevState) => ({ ...prevState, oldUrl: imageUrl, imageUrl: newImageUrl, })); return; } } } if (state.imageUrl !== false) { setState((prevState) => ({ ...prevState, imageUrl: false, })); } }, [state] ); const thumb = (imageUrl) => { return thumbnail && imageUrl && !imageUrl.startsWith("data:image/") ? `https://i.near.social/${thumbnail}/${imageUrl}` : imageUrl; }; const img = state.imageUrl !== null ? state.imageUrl : imageUrl; const src = img !== false ? img : fallbackUrl; return ( <img className={propClassName || "img-fluid"} style={style} src={src !== null ? thumb(src) : loadingUrl} alt={alt} onError={() => replaceIpfs(img)} /> );