Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hot fix for stg #94

Merged
merged 5 commits into from
Aug 10, 2023
Merged

hot fix for stg #94

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a40febf
Merge pull request #62 from Itheum/stg
newbreedofgeek Aug 5, 2023
c293e46
0.2.0 : Merge pull request #87 from Itheum/stg
newbreedofgeek Aug 7, 2023
034728b
hot fix my listed
bucurdavid Aug 8, 2023
1d2e9f0
added console log back
bucurdavid Aug 8, 2023
7c02511
Fixed #93, offers can have the same data nft
bucurdavid Aug 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 66 additions & 65 deletions src/pages/MyListed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ export const MyListed = () => {

async function fetchDataNfts() {
setIsNftLoading(true);

const _dataNfts: DataNft[] = await DataNft.createManyFromApi(offers.map((offer) => offer.offeredTokenNonce));
const nonces: number[] = offers.map((offer) => offer.offeredTokenNonce);
const _dataNfts: DataNft[] = await DataNft.createManyFromApi(nonces);
console.log("_dataNfts", _dataNfts);
setDataNfts(_dataNfts);

Expand All @@ -52,6 +52,8 @@ export const MyListed = () => {
}, [address, hasPendingTransactions]);

useEffect(() => {
if (!offers.length) return;

fetchDataNfts();
}, [offers]);

Expand All @@ -68,37 +70,36 @@ export const MyListed = () => {
<div className="row mt-5">
{offers.length > 0 ? (
offers.map((offer, index) => {
const isDataNftLoaded = !isNftLoading && dataNfts.length > index;
const isDataNftLoaded = !isNftLoading;
const nftId = createNftId(offer.offeredTokenIdentifier, offer.offeredTokenNonce);

return (
<div className="col-12 col-md-6 col-lg-4 mb-3 d-flex justify-content-center c-nft-tile" key={`o-c-${index}`}>
<div className="card shadow-sm border">
<div className="card-body p-3">
<div className="mb-4">
<img
src={isDataNftLoaded ? dataNfts[index].nftImgUrl : "https://media.elrond.com/nfts/thumbnail/default.png"}
className="data-nft-image"
/>
</div>

<div className="mb-1">
<h5 className="text-center text-info">Offer Detail</h5>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Identifier:</span>
<span className="col-8 c-identifier-link">
<span>{nftId}</span>
<a href={`${MARKETPLACE_DETAILS_PAGE}${nftId}`} className="ml-2 address-link text-decoration-none" target="_blank">
<FaExternalLinkAlt />
</a>
</span>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Listed:</span>
<span className="col-8">{offer.quantity}</span>
</div>
{/* <div className="mb-1 row">
const dataNft = dataNfts.find((nft) => nft.tokenIdentifier == nftId);

if (dataNft) {
return (
<div className="col-12 col-md-6 col-lg-4 mb-3 d-flex justify-content-center c-nft-tile" key={`o-c-${index}`}>
<div className="card shadow-sm border">
<div className="card-body p-3">
<div className="mb-4">
<img src={isDataNftLoaded ? dataNft.nftImgUrl : "https://media.elrond.com/nfts/thumbnail/default.png"} className="data-nft-image" />
</div>

<div className="mb-1">
<h5 className="text-center text-info">Offer Detail</h5>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Identifier:</span>
<span className="col-8 c-identifier-link">
<span>{nftId}</span>
<a href={`${MARKETPLACE_DETAILS_PAGE}${nftId}`} className="ml-2 address-link text-decoration-none" target="_blank">
<FaExternalLinkAlt />
</a>
</span>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Listed:</span>
<span className="col-8">{offer.quantity}</span>
</div>
{/* <div className="mb-1 row">
<span className="col-4 opacity-6">Wanting:</span>
<span className="col-8">
{convertWeiToEsdt(
Expand All @@ -108,42 +109,42 @@ export const MyListed = () => {
</span>
</div> */}

<div className="mt-4 mb-1">
<h5 className="text-center text-info">Data NFT Detail</h5>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Title:</span>
<span className="col-8">{isDataNftLoaded && dataNfts[index].title}</span>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Description:</span>
<span className="col-8">
{isDataNftLoaded &&
(dataNfts[index].description.length > 20 ? dataNfts[index].description.slice(0, 20) + " ..." : dataNfts[index].description)}
</span>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Creator:</span>
<span className="col-8 cs-creator-link">
{isDataNftLoaded && <ElrondAddressLink explorerAddress={explorerAddress} address={dataNfts[index].creator} precision={6} />}
</span>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Created At:</span>
<span className="col-8">{isDataNftLoaded && dataNfts[index].creationTime.toLocaleString()}</span>
</div>
<div className="mb-1 row">
<span className="col-5 opacity-6">Total Supply:</span>
<span className="col-7">{isDataNftLoaded && dataNfts[index].supply}</span>
</div>
<div className="mb-1 row">
<span className="col-5 opacity-6">Royalties:</span>
<span className="col-7">{isDataNftLoaded && `${convertToLocalString(dataNfts[index].royalties * 100, 2)}%`}</span>
<div className="mt-4 mb-1">
<h5 className="text-center text-info">Data NFT Detail</h5>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Title:</span>
<span className="col-8">{isDataNftLoaded && dataNft.title}</span>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Description:</span>
<span className="col-8">
{isDataNftLoaded && (dataNft.description.length > 20 ? dataNft?.description.slice(0, 20) + " ..." : dataNft.description)}
</span>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Creator:</span>
<span className="col-8 cs-creator-link">
{isDataNftLoaded && <ElrondAddressLink explorerAddress={explorerAddress} address={dataNft.creator} precision={6} />}
</span>
</div>
<div className="mb-1 row">
<span className="col-4 opacity-6">Created At:</span>
<span className="col-8">{isDataNftLoaded && dataNft.creationTime.toLocaleString()}</span>
</div>
<div className="mb-1 row">
<span className="col-5 opacity-6">Total Supply:</span>
<span className="col-7">{isDataNftLoaded && dataNft.supply}</span>
</div>
<div className="mb-1 row">
<span className="col-5 opacity-6">Royalties:</span>
<span className="col-7">{isDataNftLoaded && `${convertToLocalString(dataNft.royalties * 100, 2)}%`}</span>
</div>
</div>
</div>
</div>
</div>
);
);
}
})
) : (
<h4 className="no-items">You do not have any listed Data NFTs offers.</h4>
Expand Down