Merge pull request #433 from GenaDrop:staging

Added data for correctly displaying the owned NFT by the connected user
GenaDrop · Nov 28, 2024 · fde4e19 · fde4e19
2 parents a70dc9a + 15259a9
commit fde4e19
Show file tree

Hide file tree

Showing 4 changed files with 347 additions and 228 deletions.
diff --git a/apps/Mintbase/widget/Mintbase/App/NFTDetails/Index.jsx b/apps/Mintbase/widget/Mintbase/App/NFTDetails/Index.jsx
@@ -1,10 +1,16 @@
 const { isDarkModeOn, accountId, connectedDao } = props;
+
+const { getAllTokens } = VM.require(
+  "${config_account}/widget/Mintbase.utils.get_all_tokens"
+);
 const metadataId =
   props.metadataId || "nft.herewallet.near:d96acabbdb8bc6ad1317385be84030ed";
 const extractedContactId = metadataId.split(":")[0];
 const contractId =
   props.contractId || extractedContactId || "nft.herewallet.near";
 
+const [myToken, setMyToken] = useState("");
+
 const buySvg = (
   <svg
     id="Layer_1"
@@ -220,44 +226,83 @@ const fetchNFTData = (contractId) => {
     dataNFT: response2.body.data.mb_views_active_listings,
   });
 };
-fetchNFTData(contractId);
-fetchStoreFrontData(metadataId);
+useEffect(() => {
+  fetchNFTData(contractId);
+  fetchStoreFrontData(metadataId);
+}, []);
+
+useEffect(() => {
+  const user = context.accountId;
+  getAllTokens({
+    metadataId,
+    limit: 50,
+    offset: 0,
+    search_fields: [
+      {
+        owner: {
+          _ilike: `%${user}%`,
+        },
+      },
+      {
+        token_id: {
+          _ilike: `%${user}%`,
+        },
+      },
+    ],
+  })
+    .then(({ data }) => {
+      const { tokens, totalTokensCount, errors } = data;
+      if (errors) {
+        console.error(errors);
+      }
+      // setCountNFTs(totalRecords);
+      // setLoading(fale);
+      setMyToken(tokens);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+}, [metadataId]);
 const isMintedContract = ["mintbase1.near", "mintspace2.testnet"].some(
   (substring) => contractId?.includes(substring)
 );
 
 return (
   <>
-    {state.infoNFT.owner == context.accountId && (
-      <Navbar>
-        <div className="container">
-          {isMintedContract ? (
-            <>
-              <button
-                className="button cus"
-                onClick={() => setModalState("BURN")}
-              >
-                Burn
-              </button>
-              <button
-                className="button"
-                onClick={() => setModalState("MULTIPLY")}
-              >
-                Multiply
-              </button>
-            </>
-          ) : (
-            <></>
-          )}
-          <button className="button" onClick={() => setModalState("TRANSFER")}>
-            Transfer
-          </button>
-          <button className="button" onClick={() => setModalState("SELL")}>
-            Sell
-          </button>
-        </div>
-      </Navbar>
-    )}
+    {state.infoNFT.owner == context.accountId ||
+      (myToken.length && (
+        <Navbar>
+          <div className="container">
+            {isMintedContract ? (
+              <>
+                <button
+                  className="button cus"
+                  onClick={() => setModalState("BURN")}
+                >
+                  Burn
+                </button>
+                <button
+                  className="button"
+                  onClick={() => setModalState("MULTIPLY")}
+                >
+                  Multiply
+                </button>
+              </>
+            ) : (
+              <></>
+            )}
+            <button
+              className="button"
+              onClick={() => setModalState("TRANSFER")}
+            >
+              Transfer
+            </button>
+            <button className="button" onClick={() => setModalState("SELL")}>
+              Sell
+            </button>
+          </div>
+        </Navbar>
+      ))}
     {modalState !== "" && (
       <div>
         <ModalBg />
@@ -316,6 +361,7 @@ return (
         NftCount: state.NftCount,
         listingCount: state.listingCount,
         connectedDao: connectedDao,
+        usersTokens: myToken,
       }}
     />
     <Widget

diff --git a/apps/Mintbase/widget/Mintbase/App/NFTDetails/NFTShow.jsx b/apps/Mintbase/widget/Mintbase/App/NFTDetails/NFTShow.jsx
@@ -1,4 +1,11 @@
-const { isDarkModeOn, data, NftCount, listingCount, connectedDao } = props;
+const {
+  isDarkModeOn,
+  data,
+  NftCount,
+  listingCount,
+  connectedDao,
+  usersTokens,
+} = props;
 const { buyToken } = VM.require(
   "${config_account}/widget/Mintbase.NFT.modules"
 );
@@ -444,20 +451,25 @@ return (
               <small className="text-desc">{data?.nft_contract_id}</small>
             </Link>
           </a>
-          {/* <a href="#" className="item-view">
+          <a href="#" className="item-view">
             <small>Owner</small>
             <Link
               to={href({
                 widgetSrc: "${config_account}/widget/Mintbase.App.Index",
                 params: {
                   page: "human",
-                  accountId: data?.owner,
+                  accountId: usersTokens ? usersTokens[0].owner : data.owner,
                 },
               })}
             >
-              <small className="text-desc">{data?.owner}</small>
+              <small className="text-desc">
+                {usersTokens
+                  ? `${usersTokens[0].owner} (${usersTokens[0].token_id})`
+                  : data.owner}
+              </small>
             </Link>
-          </a> */}
+          </a>
+
           <a href="#" className="item-view">
             <small>Total Minted</small>
             <small>{NftCount}</small>