feat: Add ENS resolution

A section has been added for resolving ENS addresses. This was made to assist with reproducing this bug: MetaMask/eth-json-rpc-middleware#335
MetaMask · Oct 10, 2024 · 3216e2a · 3216e2a
1 parent f417d01
commit 3216e2a
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1599,6 +1599,37 @@ <h4 class="card-title">
           </div>
         </div>
       </section>
+      <section>
+        <div class="row d-flex justify-content-center">
+          <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
+            <div class="card">
+              <div class="card-body">
+                <h4 class="card-title">
+                  ENS Resolution
+                </h4>
+                <div class="form-group">
+                  <label>Address</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="ensInput"
+                  />
+                </div>
+                <button
+                  class="btn btn-primary btn-lg btn-block mb-3"
+                  id="ensSubmit"
+                >
+                  Submit
+                </button>
+                <p class="info-text alert alert-warning">
+                  Result:
+                  <span id="ensResult"></span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </main>
 
     <script src="main.js" defer></script>

diff --git a/src/index.js b/src/index.js
@@ -363,6 +363,12 @@ const maliciousPermitHexPaddedChain = document.getElementById(
 const maliciousPermitIntAddress = document.getElementById(
   'maliciousPermitIntAddress',
 );
+
+// ENS Resolution
+const ensInput = document.getElementById('ensInput');
+const ensSubmit = document.getElementById('ensSubmit');
+const ensResult = document.getElementById('ensResult');
+
 // Buttons that require connecting an account
 const allConnectedButtons = [
   deployButton,
@@ -457,6 +463,7 @@ const allConnectedButtons = [
   maliciousPermitHexPaddedChain,
   maliciousPermitIntAddress,
   maliciousPermitIntAddress,
+  ensSubmit,
 ];
 
 // Buttons that are available after initially connecting an account
@@ -509,6 +516,7 @@ const initialConnectedButtons = [
   maliciousApproveERC20WithOddHexData,
   maliciousPermitHexPaddedChain,
   maliciousPermitIntAddress,
+  ensSubmit,
 ];
 
 /**
@@ -3298,6 +3306,23 @@ const initializeFormElements = () => {
     console.log(result);
   };
 
+  /**
+   * ENS Resolution
+   */
+  ensSubmit.onclick = async () => {
+    try {
+      ensResult.innerHTML = 'Resolving...';
+      const ensAddress = ensInput.value;
+      const ensResolver = await ethersProvider.getResolver(ensAddress);
+      const ethAddress = await ensResolver.getAddress();
+
+      ensResult.innerHTML = String(ethAddress);
+    } catch (error) {
+      console.error(error);
+      ensResult.innerHTML = 'Failed to resolve address';
+    }
+  };
+
   /**
    * Providers
    */