From 034728b9d9ec2454430c6626e8ed3e9a71814761 Mon Sep 17 00:00:00 2001
From: Bucur David <dbucur22@gmail.com>
Date: Tue, 8 Aug 2023 20:45:57 +0300
Subject: [PATCH 1/3] hot fix my listed

---
 src/pages/MyListed.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/MyListed.tsx b/src/pages/MyListed.tsx
index f7151ef..8c9cb88 100644
--- a/src/pages/MyListed.tsx
+++ b/src/pages/MyListed.tsx
@@ -37,9 +37,8 @@ export const MyListed = () => {
 
   async function fetchDataNfts() {
     setIsNftLoading(true);
-
-    const _dataNfts: DataNft[] = await DataNft.createManyFromApi(offers.map((offer) => offer.offeredTokenNonce));
-    console.log("_dataNfts", _dataNfts);
+    const nonces: number[] = offers.map((offer) => offer.offeredTokenNonce);
+    const _dataNfts: DataNft[] = await DataNft.createManyFromApi(nonces);
     setDataNfts(_dataNfts);
 
     setIsNftLoading(false);
@@ -52,6 +51,8 @@ export const MyListed = () => {
   }, [address, hasPendingTransactions]);
 
   useEffect(() => {
+    if (!offers.length) return;
+
     fetchDataNfts();
   }, [offers]);
 

From 1d2e9f02de2c1dccd7fdbc8cb75228c64979c83e Mon Sep 17 00:00:00 2001
From: Bucur David <dbucur22@gmail.com>
Date: Tue, 8 Aug 2023 20:49:07 +0300
Subject: [PATCH 2/3] added console log back

---
 src/pages/MyListed.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/MyListed.tsx b/src/pages/MyListed.tsx
index 8c9cb88..5569d27 100644
--- a/src/pages/MyListed.tsx
+++ b/src/pages/MyListed.tsx
@@ -39,6 +39,7 @@ export const MyListed = () => {
     setIsNftLoading(true);
     const nonces: number[] = offers.map((offer) => offer.offeredTokenNonce);
     const _dataNfts: DataNft[] = await DataNft.createManyFromApi(nonces);
+    console.log("_dataNfts", _dataNfts);
     setDataNfts(_dataNfts);
 
     setIsNftLoading(false);

From 7c025116647a37397cd17c5783aa3aa6eb7a16a7 Mon Sep 17 00:00:00 2001
From: Bucur David <dbucur22@gmail.com>
Date: Thu, 10 Aug 2023 00:10:34 +0300
Subject: [PATCH 3/3] Fixed #93, offers can have the same data nft

---
 src/pages/MyListed.tsx | 125 ++++++++++++++++++++---------------------
 1 file changed, 62 insertions(+), 63 deletions(-)

diff --git a/src/pages/MyListed.tsx b/src/pages/MyListed.tsx
index 5569d27..dfd8fa1 100644
--- a/src/pages/MyListed.tsx
+++ b/src/pages/MyListed.tsx
@@ -70,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(
@@ -110,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>