WIP: docs page (#27)

Co-authored-by: Mario Christopher <[email protected]>
Consensys · Mar 22, 2024 · de6f847 · de6f847
1 parent c14ce22
commit de6f847
Show file tree

Hide file tree

Showing 3 changed files with 194 additions and 0 deletions.
diff --git a/docs/icon.png b/docs/icon.png
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html>
+  <head>
+      <title>LXP Snap</title>
+      <meta charset="utf-8"/>
+      <meta name="viewport" content="width=device-width"/>
+      <meta property="og:title" content="LXP Snap" />
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+      <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
+      <style type="text/css">
+        body { 
+          display:flex;
+          justify-content:center;
+          align-items:center;
+          height:100vh;
+          background:rgb(18,18,18) url(overlay.png) top right no-repeat;
+          color:#fff; 
+          font-family:"DM Sans", sans-serif;
+        }
+        #page { 
+          width:760px;
+        }
+        #screenshot { 
+          float:left;
+          margin-right:36px; 
+        }
+        #icon { 
+          border-radius:32px; 
+          margin-right:0.5rem; 
+        }
+        a, a:link, a:visited, a:focus, a:hover, a:active { 
+          color:rgb(97, 223, 255) !important; 
+        }
+        a:hover { 
+          color:#fff !important; 
+        }
+        button.btn, button.btn-primary { 
+          background-color:rgb(97, 223, 255) !important;
+          border-color:rgb(97, 223, 255) !important;
+          color:#000 !important; 
+          padding-left:1rem !important;
+          padding-right:1rem !important;
+          border-radius:9999px !important; 
+          font-weight:500 !important;
+          text-transform:uppercase !important;
+        }
+        button.btn:hover, button.btn-primary:hover { 
+          background-color:#fff !important;
+          border-color:#fff !important;
+        }
+        #screenshot img { 
+          border:1px solid #777; 
+          border-radius:12px; 
+        }
+        h1 { 
+          font-size:1.5rem;
+          line-height:64px; 
+          padding:0;
+          margin-bottom:72px; 
+        }
+        h1 img { 
+          vertical-align:top;
+        }
+        h2 { 
+          font-size:1.125rem;
+          font-weight:bold;
+        }
+        #footer { 
+          position:fixed;
+          width:860px; 
+          bottom:0;
+          left:50%;
+          margin-left:-430px;
+          padding-bottom:24px; 
+          text-align:right; ;
+        }
+      </style>
+  </head>
+  <body>
+    <div id="page">
+      <div id="screenshot">
+        <!-- img src="screenshot.jpg" width="338" height="594" alt="Screenshot of FarFeed" -->
+      </div>
+      <h1><img src="icon.png" width="64" height="64" alt="" id="icon"> LXP Snap</h1>
+      <h2>Follow your LXP journey.</h2>
+      <p>View your Linea XP balance right inside of MetaMask!</p>
+      <p id="loading">Loading...</p>
+      <p>After installing the Snap, open the Snaps menu in MetaMask and click on LXP to view your Linea XP balance, Proof of Humanity status, and current activations.</p>
+    </div>
+    <div id="footer">
+      Powered by <a href="https://metamask.io/snaps/">MetaMask Snaps</a>
+    </div>
+
+    <script type="text/javascript">
+
+const snapId = 'npm:@consensys/lxp-snap';
+const snapName = 'LXP Snap'; 
+
+/* 
+ * Use EIP-6963 to detect MetaMask
+ */
+
+const MetaMaskFound = async (providerDetail) => { 
+
+  document.getElementById('loading').className = "found"; 
+
+  const btn = document.createElement("button"); 
+  btn.className = "btn btn-primary btn-lg"; 
+  btn.textContent = "Install "+snapName; 
+
+  const provider = providerDetail.provider; 
+
+  btn.onclick = async (event) => { 
+    event.preventDefault(); 
+    try { 
+      const result = await provider.request({ 
+        method: 'wallet_requestSnaps', 
+        params: 
+        {
+          [snapId]: { }
+        },
+      }); 
+
+      if(result) { 
+        try { 
+          const snaps = await provider.request({
+            method: 'wallet_getSnaps',
+          }); 
+          if( Object.keys(snaps).includes(snapId) ) { 
+            // the snap is installed and connected 
+            btn.textContent = "Installed!"; 
+            btn.onclick = null; 
+            btn.disabled = true; 
+          }
+          else { 
+            // the snap was not installed 
+          }
+        }
+        catch { }
+      }
+    }
+    catch { }
+  }; 
+  document.getElementById('loading').textContent = "";
+  document.getElementById('loading').appendChild(btn); 
+
+}; 
+
+window.onload = function() {
+
+  window.addEventListener(
+    "eip6963:announceProvider",
+    (event) => {
+      /* event.detail contains the discovered provider interface */ 
+      const providerDetail = event.detail; 
+
+      /* 
+       * You could take one of these cases and use it for your needs,
+       * or set up a conditional that takes any of these possibilities, 
+       * or prompt the user to choose which MetaMask flavor they want to use 
+       * in case they have multiple MetaMask extensions installed at the same time
+       */
+      if(providerDetail.info.rdns == "io.metamask") { 
+        /* this is MetaMask */
+        MetaMaskFound(providerDetail); 
+      }
+      else if(providerDetail.info.rdns == "io.metamask.flask") { 
+        /* this is MetaMask Flask */ 
+        MetaMaskFound(providerDetail); 
+      }
+      else if(providerDetail.info.rdns == "io.metamask.mmi") { 
+        /* this is MetaMask Institutional */ 
+        MetaMaskFound(providerDetail); 
+      }
+    }
+  );
+
+  window.dispatchEvent(new Event("eip6963:requestProvider"));
+
+  setTimeout(() => { 
+    if("found"!==document.getElementById('loading').className) { 
+      /* Assume MetaMask was not detected */
+      document.getElementById('loading').textContent = ""; 
+      document.getElementById('loading').insertAdjacentHTML("afterbegin", "Please install <a href='https://metamask.io/'>MetaMask</a> first.");  
+    }
+  }, 1000)
+
+}
+
+    </script>
+  </body>
+</html>
diff --git a/docs/overlay.png b/docs/overlay.png