let contractId = props.contractId ?? context.contractId; let tokenId = props.tokenId ?? context.tokenId; let thumbnail = props.thumbnail ?? context.thumbnail; const nftMetadata = Near.view(contractId, "nft_metadata", { token_id: tokenId, }); const nftToken = Near.view(contractId, "nft_token", { token_id: tokenId, }); let tokenMetadata = nftToken.metadata; let tokenMedia = tokenMetadata.media || ""; const ownerId = nftToken.owner_id["Account"] ? nftToken.owner_id["Account"] : nftToken.owner_id; let imageUrl = tokenMedia.startsWith("https://") || tokenMedia.startsWith("http://") || tokenMedia.startsWith("data:image") ? tokenMedia : nftMetadata.base_uri ? `${nftMetadata.base_uri}/${tokenMedia}` : tokenMedia.startsWith("Qm") ? `https://cloudflare-ipfs.com/ipfs/${tokenMedia}` : tokenMedia; let mjolnearUrl = `https://mjolnear.com/nfts/${contractId}/${tokenId}`; let parasUrl = `https://paras.id/token/${contractId}/${tokenId}`; let mintbaseUrl = null; let parasOwnerUrl = `https://paras.id/${ownerId}/collectibles`; let parasCollectionUrl = `https://paras.id/collection/${contractId}`; let title = tokenMetadata.title; let description = tokenMetadata.description || nftMetadata.name; let res = ""; let reference = ""; // TODO: mintbase requires extra fetch if ( !tokenMedia && tokenMetadata.reference && nftMetadata.base_uri === "https://arweave.net" ) { res = fetch(`${nftMetadata.base_uri}/${tokenMetadata.reference}`); // const reference = await res.json(); reference = res.body; if (reference) { imageUrl = reference.media; title = reference.title; description = reference.description; tokenUrl = `https://mintbase.io/thing/${tokenMetadata.reference}:${contractId}`; ownerUrl = `https://mintbase.io/human/${ownerId}`; storeUrl = `https://mintbase.io/store/${contractId}`; mintbaseUrl = tokenUrl; } } return ( <div className="nft"> <img className="nft rounded w-100 h-100" style={{ objectFit: "cover" }} src={thumbnail ? `https://i.near.social/thumbnail/${imageUrl}` : imageUrl} alt={title} /> </div> );