add section to watch a token (#222)

* add section to watch a token
MetaMask · Apr 20, 2023 · 6be7092 · 6be7092
1 parent ee51e52
commit 6be7092
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -523,6 +523,62 @@ <h4 class="card-title">
             </p>
           </div>
         </div>
+      </div>
+      <div
+        class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch"
+      >
+        <div class="card full-width">
+          <div class="card-body">
+            <h4 class="card-title">
+              EIP 747
+            </h4>
+
+            <div class="form-group">
+              <label>ERC20 Token Address</label>
+              <input
+                class="form-control"
+                type="text"
+                placeholder="0x..."
+                id="eip747ContractAddress"
+              />
+            </div>
+
+            <div class="form-group">
+              <label>Symbol</label>
+              <input
+                class="form-control"
+                type="text"
+                placeholder="XYZ"
+                id="eip747Symbol"
+              />
+            </div>
+
+            <div class="form-group">
+              <label>Decimals</label>
+              <input
+                class="form-control"
+                type="number"
+                placeholder="18"
+                id="eip747Decimals"
+              />
+            </div>
+
+            <div class="form-group">
+              <button
+                class="btn btn-primary btn-lg btn-block mb-3"
+                id="eip747WatchButton"
+                disabled
+              >
+                Add Token
+              </button>
+            </div>
+
+            <p class="info-text alert alert-secondary">
+              EIP 747: <span id="eip747Status"></span>
+            </p>
+          </div>
+        </div>
+      </div>
       </section>
 
       <section>

diff --git a/src/index.js b/src/index.js
@@ -111,6 +111,13 @@ const setApprovalForAllERC1155Button = document.getElementById(
 const revokeERC1155Button = document.getElementById('revokeERC1155Button');
 const erc1155Status = document.getElementById('erc1155Status');
 
+// ERC 747 Section
+const eip747ContractAddress = document.getElementById('eip747ContractAddress');
+const eip747Symbol = document.getElementById('eip747Symbol');
+const eip747Decimals = document.getElementById('eip747Decimals');
+const eip747WatchButton = document.getElementById('eip747WatchButton');
+const eip747Status = document.getElementById('eip747Status');
+
 // Send Eth Section
 const sendButton = document.getElementById('sendButton');
 const sendEIP1559Button = document.getElementById('sendEIP1559Button');
@@ -336,6 +343,7 @@ const initialize = async () => {
     siweBadDomain,
     siweBadAccount,
     siweMalformed,
+    eip747WatchButton,
   ];
 
   const isMetaMaskConnected = () => accounts && accounts.length > 0;
@@ -397,6 +405,7 @@ const initialize = async () => {
       siweBadDomain.disabled = false;
       siweBadAccount.disabled = false;
       siweMalformed.disabled = false;
+      eip747WatchButton.disabled = false;
     }
 
     if (isMetaMaskInstalled()) {
@@ -850,6 +859,36 @@ const initialize = async () => {
       erc1155Status.innerHTML = 'Revoke completed';
     };
 
+    /**
+     *  EIP 747
+     */
+
+    eip747WatchButton.onclick = async () => {
+      eip747Status.innerHTML = 'Adding token...';
+
+      try {
+        const result = await ethereum.request({
+          method: 'wallet_watchAsset',
+          params: {
+            type: 'ERC20',
+            options: {
+              address: eip747ContractAddress.value,
+              symbol: eip747Symbol.value,
+              decimals: parseInt(eip747Decimals.value, 10),
+              image: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
+            },
+          },
+        });
+
+        console.log(result);
+        eip747Status.innerHTML = 'Token added successfully';
+      } catch (error) {
+        console.error(error);
+        eip747Status.innerHTML =
+          'There was an error adding the token. See console for details.';
+      }
+    };
+
     /**
      * Sending ETH
      */