Show notification when MetaMask is not installed

diff --git a/index.html b/index.html
index 8ec101b9ec437b6b7ed928dccfc05c93f4da4288..6f8750c5bd5ca7889cf52a2609e7cc47627011de 100644 (file)
--- a/index.html
+++ b/index.html
@@ -57,6 +57,13 @@
 
       <output id="status" name="status"></output>
     </form>
+
+    <dialog id="notification">
+      <form method="dialog">
+        <p id="notification-content"></p>
+        <button class="text-button">OK</button>
+      </form>
+    </dialog>
   </main>
 
   <script>

diff --git a/script.js b/script.js
index 62c0156a9dd0840ffdc957547323d15b22ff649e..f6c3b6c02ab12fd00006c2e6745510dab42805b2 100644 (file)
--- a/script.js
+++ b/script.js
@@ -4,6 +4,8 @@ const shortUrlInput = document.getElementById('short-url');
 const shortUrlAside = document.getElementById('short-url-aside');
 const statusOutput = document.getElementById('status');
 const form = document.querySelector('form');
+const notification = document.getElementById('notification');
+const notificationContent = document.getElementById('notification-content');
 
 // Helper function to call the balanceOf function on an address to check if it's eligible to create
 // custom short URLs. The same logic is executed on the backend to independently validate on server-side.
@@ -106,13 +108,21 @@ async function handleSubmit(event) {
   statusOutput.textContent = await response.text();
 }
 
-// User switches account manually in MetaMask
-ethereum.addListener('accountsChanged', setAccount);
+if (window.ethereum !== undefined) {
+  // User switches account manually in MetaMask
+  ethereum.addListener('accountsChanged', setAccount);
+}
 
 connectButton.addEventListener('click', () => {
-  ethereum
-    .request({ method: 'eth_requestAccounts' })
-    .then(setAccount);
+  if (window.ethereum !== undefined) {
+    ethereum
+      .request({ method: 'eth_requestAccounts' })
+      .then(setAccount);
+  }
+  else {
+    notificationContent.textContent = 'MetaMask must be installed to Connect Wallet.';
+    notification.show();
+  }
 });
 
 form.addEventListener('submit', handleSubmit);
\ No newline at end of file

diff --git a/style.css b/style.css
index 4ad0b7fcadf3d8fb6d93e7aa6c351b41a1aedbb5..426562090a5db3edf0ca13a53ef2f212db79871c 100644 (file)
--- a/style.css
+++ b/style.css
@@ -233,6 +233,17 @@ output::after {
   }
 }
 
+dialog {
+  position: fixed;
+  bottom: 16px;
+  background: var(--primary-complement);
+  border-radius: 16px;
+}
+
+dialog>form {
+  flex-direction: row;
+}
+
 #connect {
   max-inline-size: 18ch;
   white-space: nowrap;