From cff80fe4478738239b94d2190ddc7658e15f4b56 Mon Sep 17 00:00:00 2001
From: seaona <mariona@gmx.es>
Date: Tue, 25 Jul 2023 11:27:01 +0200
Subject: [PATCH 1/2] Watch NFT by id

---
 src/index.html | 20 ++++++++++++++++++++
 src/index.js   | 51 +++++++++++++++++++++++++-------------------------
 2 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/index.html b/src/index.html
index 92b38b25..fe2a0ad5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -355,6 +355,26 @@ <h4 class="card-title">
                   </button>
                 </div>
 
+                <div class="form-group">
+                  <label>Watch NFT</label>
+                  <input
+                    class="form-control"
+                    type="number"
+                    id="watchNFTInput"
+                    value="1"
+                  />
+                </div>
+
+                <div class="form-group">
+                  <button
+                    class="btn btn-primary btn-lg btn-block mb-3"
+                    id="watchNFTButton"
+                    disabled
+                  >
+                    Watch NFT
+                  </button>
+                </div>
+
                 <div class="form-group">
                   <button
                     class="btn btn-primary btn-lg btn-block mb-3"
diff --git a/src/index.js b/src/index.js
index 6c47466b..25543bef 100644
--- a/src/index.js
+++ b/src/index.js
@@ -86,6 +86,8 @@ const watchNFTButtons = document.getElementById('watchNFTButtons');
 const mintAmountInput = document.getElementById('mintAmountInput');
 const approveTokenInput = document.getElementById('approveTokenInput');
 const approveButton = document.getElementById('approveButton');
+const watchNFTInput = document.getElementById('watchNFTInput');;
+const watchNFTButton = document.getElementById('watchNFTButton');;
 const setApprovalForAllButton = document.getElementById(
   'setApprovalForAllButton',
 );
@@ -304,6 +306,8 @@ const initialize = async () => {
     mintAmountInput,
     approveTokenInput,
     approveButton,
+    watchNFTInput,
+    watchNFTButton,
     setApprovalForAllButton,
     revokeButton,
     transferTokenInput,
@@ -452,6 +456,8 @@ const initialize = async () => {
       mintAmountInput.disabled = false;
       approveTokenInput.disabled = false;
       approveButton.disabled = false;
+      watchNFTInput.disabled = false;
+      watchNFTButton.disabled = false
       setApprovalForAllButton.disabled = false;
       revokeButton.disabled = false;
       transferTokenInput.disabled = false;
@@ -723,38 +729,33 @@ const initialize = async () => {
       nftsStatus.innerHTML = 'Mint completed';
       approveTokenInput.disabled = false;
       approveButton.disabled = false;
+      watchNFTInput.disabled = false;
+      watchNFTButton.disabled = false;
       setApprovalForAllButton.disabled = false;
       revokeButton.disabled = false;
       transferTokenInput.disabled = false;
       transferFromButton.disabled = false;
       watchNFTsButton.disabled = false;
       watchNFTButtons.innerHTML = '';
-      const nftsContractAddress = nftsContract.address;
-      const currentTokenId = await nftsContract.currentTokenId();
-      for (let i = 0; i < currentTokenId; i++) {
-        const button = document.createElement('button');
-        button.innerHTML = `Watch NFT ${i + 1}`;
-        button.className = 'btn btn-primary btn-lg btn-block mb-3';
-        button.onclick = async () => {
-          let watchNftsResult;
-          try {
-            watchNftsResult = await ethereum.request({
-              method: 'wallet_watchAsset',
-              params: {
-                type: 'ERC721',
-                options: {
-                  address: nftsContractAddress,
-                  tokenId: `${i + 1}`,
-                },
-              },
-            });
-          } catch (error) {
-            console.error(error);
-          }
-          console.log(watchNftsResult);
-        };
-        watchNFTButtons.appendChild(button);
+    };
+
+    watchNFTButton.onclick = async () => {
+      let watchNftsResult;
+      try {
+        watchNftsResult = await ethereum.request({
+          method: 'wallet_watchAsset',
+          params: {
+            type: 'ERC721',
+            options: {
+              address: nftsContract.address,
+              tokenId: watchNFTInput.value,
+            },
+          },
+        });
+      } catch (error) {
+        console.error(error);
       }
+      console.log(watchNftsResult);
     };
 
     approveButton.onclick = async () => {

From 81cc49219b28fc241883362ffbaa8178b6061b70 Mon Sep 17 00:00:00 2001
From: seaona <mariona@gmx.es>
Date: Tue, 25 Jul 2023 11:34:10 +0200
Subject: [PATCH 2/2] lint

---
 src/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index 25543bef..48841b82 100644
--- a/src/index.js
+++ b/src/index.js
@@ -86,8 +86,8 @@ const watchNFTButtons = document.getElementById('watchNFTButtons');
 const mintAmountInput = document.getElementById('mintAmountInput');
 const approveTokenInput = document.getElementById('approveTokenInput');
 const approveButton = document.getElementById('approveButton');
-const watchNFTInput = document.getElementById('watchNFTInput');;
-const watchNFTButton = document.getElementById('watchNFTButton');;
+const watchNFTInput = document.getElementById('watchNFTInput');
+const watchNFTButton = document.getElementById('watchNFTButton');
 const setApprovalForAllButton = document.getElementById(
   'setApprovalForAllButton',
 );
@@ -457,7 +457,7 @@ const initialize = async () => {
       approveTokenInput.disabled = false;
       approveButton.disabled = false;
       watchNFTInput.disabled = false;
-      watchNFTButton.disabled = false
+      watchNFTButton.disabled = false;
       setApprovalForAllButton.disabled = false;
       revokeButton.disabled = false;
       transferTokenInput.disabled = false;