sourcery-ai-experiments · brendanator · Oct 20, 2023 · Oct 20, 2023 · Oct 20, 2023 · Oct 20, 2023
diff --git a/tools/walletextension/api/staticOG/index.html b/tools/walletextension/api/staticOG/index.html
@@ -2,34 +2,67 @@
 <html lang="en">
 
 <head>
-    <title>Obscuro Gateway </title>
-    <link rel="icon" type="favicon-32x32" sizes="32x32" href="favicon-32x32.png">
+    <title>Obscuro Gateway</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
     <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
             type="application/javascript"></script>
-    <script type="module" type="application/javascript" src="javascript.js"></script>
+    <script type="module" src="javascript.js"></script>
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
+        <div class="container-fluid">
+            <img src="obscuro.svg" alt="Obscuro logo" class="logo">
+        </div>
 
-<h2>◠. Obscuro Gateway Demo! ◠.</h2>
-
-
-<button class="btn btn-primary btn-lg btn-block mb-3" id="join" style="display: none">Join</button>
-<button class="btn btn-primary btn-lg btn-block mb-3" id="revokeUserID" style="display: none">Revoke UserID</button>
-<p id="status"></p>
-<table id="accountsTable" border="1">
-    <thead>
-    <tr>
-        <th>Accounts</th>
-        <th>Added to Obscuro Gateway</th>
-    </tr>
-    </thead>
-    <tbody id="tableBody">
-    <!-- Rows will be added here -->
-    </tbody>
-</table>
-
-<div id="versionDisplay" style="position: fixed; bottom: 10px; right: 10px;"></div>
+        <div class="spinner" id="spinner"></div>
+
+<div class="begin-box" id="begin-box">
+    <h2>Welcome to the Obscuro Gateway</h2>
+    <form>
+        <div id="information">Three clicks to setup encrypted communication between MetaMask and the Obscuro Network.
+            Upon hitting Begin, you'll be asked to:
+            <ol>
+                <li>
+                    Add the Obscuro Testnet network as a new network to MetaMask. Check the Network URL base is https://testnet.obscu.ro and the chain ID is 443 and hit Approve.
+                </li>
+                <li>
+                    Allow MetaMask to switch networks to the Obscuro Testnet network.
+                </li>
+                <li>
+                    Sign the <b>Signature Request</b> (this is not a transaction) to register a unique viewing key tied to your wallet account that allows only you to view your transactions. You will get a request for each of your accounts, only hit Sign on the accounts you want to connect.
+                </li>
+            </ol>
+        </div>
+        <div id="information2">
+            You are set up on Obscuro. Your connected accounts are below:
+        </div>
+      <a id="join" href="#">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        Begin
+      </a>
+      <table id="accountsTable" border="1">
+        <thead>
+        <tr>
+            <th>Account</th>
+            <th>Connected</th>
+        </tr>
+        </thead>
+        <tbody id="tableBody">
+        <!-- Rows will be added here -->
+        </tbody>
+    </table>
+    <button class="btn btn-primary btn-lg btn-block mb-3" id="revokeUserID">Revoke Accounts</button>
+      <p id="status"></p>
+    </form>
+  </div>
+
+<div id="versionDisplay"></div>
 </body>
-</html>
+</html>
+
+
+
diff --git a/tools/walletextension/api/staticOG/javascript.js b/tools/walletextension/api/staticOG/javascript.js
@@ -5,6 +5,10 @@ const idRevokeUserID = "revokeUserID";
 const idStatus = "status";
 const idAccountsTable = "accountsTable";
 const idTableBody = "tableBody";
+const idInformation = "information";
+const idInformation2 = "information2";
+const idBegin = "begin-box";
+const idSpinner = "spinner";
 const obscuroGatewayVersion = "v1";
 const pathJoin = obscuroGatewayVersion + "/join/";
 const pathAuthenticate = obscuroGatewayVersion + "/authenticate/";
@@ -51,7 +55,6 @@ async function fetchAndDisplayVersion() {
     }
 }
 
-
 function getNetworkName(gatewayAddress) {
     switch(gatewayAddress) {
         case 'https://uat-testnet.obscu.ro':
@@ -63,7 +66,6 @@ function getNetworkName(gatewayAddress) {
     }
 }
 
-
 function getRPCFromUrl(gatewayAddress) {
     // get the correct RPC endpoint for each network
     switch(gatewayAddress) {
@@ -271,22 +273,35 @@ const initialize = async () => {
     const joinButton = document.getElementById(idJoin);
     const revokeUserIDButton = document.getElementById(idRevokeUserID);
     const statusArea = document.getElementById(idStatus);
+    const informationArea = document.getElementById(idInformation);
+    const informationArea2 = document.getElementById(idInformation2);
+    const beginBox = document.getElementById(idBegin);
+    const spinner = document.getElementById(idSpinner);
 
     const accountsTable = document.getElementById(idAccountsTable)
     const tableBody = document.getElementById(idTableBody);
+
     // getUserID from the gateway with getStorageAt method
     let userID = await getUserID()
 
     function displayOnlyJoin() {
         joinButton.style.display = "block"
         revokeUserIDButton.style.display = "none"
         accountsTable.style.display = "none"
+        informationArea.style.display = "block"
+        informationArea2.style.display = "none"
+
+        beginBox.style.visibility = "visible";
+        spinner.style.visibility = "hidden";
     }
 
     async function displayConnectedAndJoinedSuccessfully() {
         joinButton.style.display = "none"
+        informationArea.style.display = "none"
+        informationArea2.style.display = "block"
         revokeUserIDButton.style.display = "block"
         accountsTable.style.display = "block"
+
         await populateAccountsTable(document, tableBody, userID)
     }
 
@@ -307,11 +322,13 @@ const initialize = async () => {
     await displayCorrectScreenBasedOnMetamaskAndUserID()
 
     joinButton.addEventListener(eventClick, async () => {
+        // clean up any previous errors
+        statusArea.innerText = ""
         // check if we are on an obscuro chain
         if (await isObscuroChain()) {
             userID = await getUserID()
             if (!isValidUserIDFormat(userID)) {
-                statusArea.innerText = "Please remove existing Obscuro network from metamask and start again."
+                statusArea.innerText = "Existing Obscuro network detected in MetaMask. Please remove before hitting begin"
             }
         } else {
             // we are not on an Obscuro network - try to switch
@@ -349,11 +366,15 @@ const initialize = async () => {
             }
 
             userID = await getUserID();
+            beginBox.style.visibility = "hidden";
+            spinner.style.visibility = "visible";
             for (const account of accounts) {
                 await authenticateAccountWithObscuroGateway(ethereum, account, userID)
                 accountsTable.style.display = "block"
                 await populateAccountsTable(document, tableBody, userID)
             }
+            beginBox.style.visibility = "visible";
+            spinner.style.visibility = "hidden";
 
             // if accounts change we want to give user chance to add them to Obscuro
             window.ethereum.on('accountsChanged', async function (accounts) {
@@ -372,6 +393,8 @@ const initialize = async () => {
     })
 
     revokeUserIDButton.addEventListener(eventClick, async () => {
+        beginBox.style.visibility = "hidden";
+        spinner.style.visibility = "visible";
         let result = await revokeUserID(userID);
 
         await populateAccountsTable(document, tableBody, userID)
@@ -382,6 +405,8 @@ const initialize = async () => {
             statusArea.innerText = "Revoking UserID failed";
         }
     })
+    beginBox.style.visibility = "visible";
+    spinner.style.visibility = "hidden";
 }
 
 window.addEventListener(eventDomLoaded, checkIfMetamaskIsLoaded);

diff --git a/tools/walletextension/api/staticOG/obscuro.svg b/tools/walletextension/api/staticOG/obscuro.svg