From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 30 Oct 2022 07:26:43 +0000 (-0700)
Subject: Show notification when MetaMask is not installed
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=75560311f18dd4edf7870984990760f960ea09de;p=alu.bz

Show notification when MetaMask is not installed
---

diff --git a/index.html b/index.html
index 8ec101b..6f8750c 100644
--- 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 62c0156..f6c3b6c 100644
--- 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 4ad0b7f..4265620 100644
--- 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;