From 75560311f18dd4edf7870984990760f960ea09de Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 30 Oct 2022 00:26:43 -0700
Subject: [PATCH] Show notification when MetaMask is not installed

---
 index.html |  7 +++++++
 script.js  | 20 +++++++++++++++-----
 style.css  | 11 +++++++++++
 3 files changed, 33 insertions(+), 5 deletions(-)

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;
-- 
2.47.3