Ziga/gateway metamask connect button

tools/walletextension/api/staticOG/index.html

@@ -14,6 +14,9 @@
 
 <h2>◠. Obscuro Gateway Demo! ◠.</h2>
 
+<button class="button" id="connectButton">
+    <img src="./MetaMaskIcon.png" alt="metamask logo" style="width: 20px" /> Connect wallet
+</button>
 <button class="btn btn-primary btn-lg btn-block mb-3" id="join">Join</button>
 <button class="btn btn-primary btn-lg btn-block mb-3" id="addAccount" style="display: none">Add current account</button>
 <button class="btn btn-primary btn-lg btn-block mb-3" id="addAllAccounts" style="display: none">Add all accounts from Metamask</button>

tools/walletextension/api/staticOG/javascript.js

@@ -5,7 +5,10 @@ const idAddAccount = "addAccount";
 const idAddAllAccounts = "addAllAccounts";
 const idRevokeUserID = "revokeUserID";
 const idStatus = "status";
-const obscuroGatewayVersion = "v1"
+const idConnectButton = "connectButton";
+const idAccountsTable = "accountsTable";
+const idTableBody = "tableBody";
+const obscuroGatewayVersion = "v1";
 const pathJoin = obscuroGatewayVersion + "/join/";
 const pathAuthenticate = obscuroGatewayVersion + "/authenticate/";
 const pathQuery = obscuroGatewayVersion + "/query/";
@@ -50,6 +53,17 @@ async function fetchAndDisplayVersion() {
     }
 }
 
+function getNetworkName(gatewayAddress) {
+    switch(gatewayAddress) {
+        case 'https://uat-testnet.obscu.ro/':
+            return 'Obscuro UAT-Testnet';
+        case 'https://dev-testnet.obscu.ro/':
+            return 'Obscuro Dev-Testnet';
+        default:
+            return 'Obscuro Testnet';
+    }
+}
+
 async function addNetworkToMetaMask(ethereum, userID, chainIDDecimal) {
     // add network to MetaMask
     let chainIdHex = "0x" + chainIDDecimal.toString(16); // Convert to hexadecimal and prefix with '0x'
@@ -59,7 +73,7 @@ async function addNetworkToMetaMask(ethereum, userID, chainIDDecimal) {
             params: [
                 {
                     chainId: chainIdHex,
-                    chainName: 'Obscuro Testnet',
+                    chainName: getNetworkName(obscuroGatewayAddress),
                     nativeCurrency: {
                         name: 'Sepolia Ether',
                         symbol: 'ETH',
@@ -146,7 +160,7 @@ async function getUserID() {
     }
 }
 
-async function connectAccount() {
+async function connectAccounts() {
     try {
         return await window.ethereum.request({ method: 'eth_requestAccounts' });
     } catch (error) {
@@ -156,6 +170,18 @@ async function connectAccount() {
     }
 }
 
+async function isMetamaskConnected() {
+    let accounts;
+    try {
+        accounts = await provider.listAccounts()
+        return accounts.length > 0;
+
+    } catch (error) {
+        console.log("Unable to get accounts")
+    }
+    return false
+}
+
 // Check if Metamask is available on mobile or as a plugin in browser
 // (https://docs.metamask.io/wallet/how-to/integrate-with-mobile/)
 function checkIfMetamaskIsLoaded() {
@@ -215,32 +241,63 @@ const initialize = async () => {
     const addAllAccountsButton = document.getElementById(idAddAllAccounts);
     const revokeUserIDButton = document.getElementById(idRevokeUserID);
     const statusArea = document.getElementById(idStatus);
+    const connectButton = document.getElementById(idConnectButton);
 
-    const accountsTable = document.getElementById('accountsTable')
-    const tableBody = document.getElementById('tableBody');
+    const accountsTable = document.getElementById(idAccountsTable)
+    const tableBody = document.getElementById(idTableBody);
     // getUserID from the gateway with getStorageAt method
     let userID = await getUserID()
 
 
-    // load the current version
-    await fetchAndDisplayVersion();
+    function displayOnlyConnectButton(){
+        joinButton.style.display = "none"
+        addAccountButton.style.display = "none"
+        addAllAccountsButton.style.display = "none"
+        revokeUserIDButton.style.display = "none"
+        accountsTable.style.display = "none"
+        connectButton.style.display = "block"
+    }
+
+    function displayOnlyJoin() {
+        joinButton.style.display = "block"
+        addAccountButton.style.display = "none"
+        addAllAccountsButton.style.display = "none"
+        revokeUserIDButton.style.display = "none"
+        accountsTable.style.display = "none"
+        connectButton.style.display = "none"
+    }
 
-    // check if userID exists and has a correct type and length (is valid) and display either
-    // option to join or to add a new account to existing user
-    if (isValidUserIDFormat(userID)) {
+    async function displayConnectedAndJoinedSuccessfully() {
         joinButton.style.display = "none"
         addAccountButton.style.display = "block"
         addAllAccountsButton.style.display = "block"
         revokeUserIDButton.style.display = "block"
         accountsTable.style.display = "block"
+        connectButton.style.display = "none"
         await populateAccountsTable(document, tableBody, userID)
-    } else {
-        joinButton.style.display = "block"
-        addAccountButton.style.display = "none"
-        revokeUserIDButton.style.display = "none"
-        accountsTable.style.display = "none"
     }
 
+
+    async function displayCorrectScreenBasedOnMetamaskAndUserID() {
+        // handle which buttons should be shown to the user
+        if (await isMetamaskConnected()) {
+            // check if userID exists and has a correct type and length (is valid) and display either
+            // option to join or to add a new account to existing user
+            if (isValidUserIDFormat(userID)) {
+                await displayConnectedAndJoinedSuccessfully()
+            } else {
+                displayOnlyJoin()
+            }
+        } else {
+            displayOnlyConnectButton()
+        }
+    }
+
+    // load the current version
+    await fetchAndDisplayVersion();
+
+    await displayCorrectScreenBasedOnMetamaskAndUserID()
+
     joinButton.addEventListener(eventClick, async () => {
         // join Obscuro Gateway
         const joinResp = await fetch(
@@ -256,7 +313,6 @@ const initialize = async () => {
 
         // save userID to the localStorage and hide button that enables users to join
         userID = await joinResp.text();
-        joinButton.style.display = "none"
 
         // add Obscuro network to Metamask
         let networkAdded = await addNetworkToMetaMask(ethereum, userID, obscuroChainIDDecimal)
@@ -266,45 +322,32 @@ const initialize = async () => {
         }
         statusArea.innerText = "Successfully joined Obscuro Gateway";
         // show users an option to add another account and revoke userID
-        addAccountButton.style.display = "block"
-        addAllAccountsButton.style.display = "block"
-        revokeUserIDButton.style.display = "block"
-        accountsTable.style.display = "block"
-        await populateAccountsTable(document, tableBody, userID)
+
+        await displayConnectedAndJoinedSuccessfully()
     })
 
     addAccountButton.addEventListener(eventClick, async () => {
         // check if we have userID and it is the correct length
         if (!isValidUserIDFormat(userID)) {
-            statusArea.innerText = "\n Please join Obscuro network first"
-            joinButton.style.display = "block"
-            addAccountButton.style.display = "none"
+            displayOnlyJoin()
         }
 
-        await connectAccount()
-
         // Get an account and prompt user to sign joining with a selected account
         const account = await provider.getSigner().getAddress();
         if (account.length === 0) {
             statusArea.innerText = "No MetaMask accounts found."
             return
         }
-        let authenticateAccountStatus = await authenticateAccountWithObscuroGateway(ethereum, account, userID)
-        //statusArea.innerText = "\n Authentication status: " + authenticateAccountStatus
-        accountsTable.style.display = "block"
+        let _ = await authenticateAccountWithObscuroGateway(ethereum, account, userID)
         await populateAccountsTable(document, tableBody, userID)
     })
 
     addAllAccountsButton.addEventListener(eventClick, async () => {
         // check if we have userID and it is the correct length
         if (!isValidUserIDFormat(userID)) {
-            statusArea.innerText = "\n Please join Obscuro network first"
-            joinButton.style.display = "block"
-            addAccountButton.style.display = "none"
+            displayOnlyJoin()
         }
 
-        await connectAccount()
-
         // Get an account and prompt user to sign joining with selected account
         const accounts = await provider.listAccounts();
         if (accounts.length === 0) {
@@ -325,17 +368,17 @@ const initialize = async () => {
         await populateAccountsTable(document, tableBody, userID)
 
         if (result) {
-            joinButton.style.display = "block";
-            revokeUserIDButton.style.display = "none";
-            addAllAccountsButton.style.display = "none";
-            statusArea.innerText = "Revoking UserID successful. Please remove current network from Metamask."
-            addAccountButton.style.display = "none";
-            accountsTable.style.display = "none"
+            displayOnlyJoin()
         } else {
             statusArea.innerText = "Revoking UserID failed";
         }
     })
 
+    connectButton.addEventListener(eventClick, async () => {
+        await connectAccounts();
+        location.reload()
+    })
+
 }
 
 window.addEventListener(eventDomLoaded, checkIfMetamaskIsLoaded);