Skip to content

Commit

Permalink
frontend improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@zkokelj
zkokelj committed Sep 14, 2023
1 parent 6578d99 commit 8a0e833
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 26 deletions.
12 changes: 12 additions & 0 deletions tools/walletextension/api/staticOG/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,17 @@ <h2>◠. Obscuro Gateway Demo! ◠.</h2>
<p id="userID"></p>
<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>

</body>
</html>
143 changes: 118 additions & 25 deletions tools/walletextension/api/staticOG/javascript.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,39 +108,124 @@ async function revokeUserID(userID) {
return revokeResponse.ok
}

const initialize = () => {
function getRandomIntAsString(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
return randomInt.toString();
}


async function getUserID() {
try {
const account = await requestAccounts(); // Request user accounts
if (account) { // Check if user granted permission
// call getStorageAt for 0x0 address and random value (to prevent MetaMask from caching requests)
const storageValue = await ethereum.request({
method: 'eth_getStorageAt',
params: ["0x0000000000000000000000000000000000000000", getRandomIntAsString(0, 1000000)],
});
return storageValue;
}
} catch (error) {
return ""
}
return ""
}

async function requestAccounts() {
try {
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
return accounts[0]; // Currently selected account
} catch (error) {
// TODO: Display warning to user to allow it and refresh page...
console.error('User denied account access:', error);
return null;
}
}

// 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() {
if (window.ethereum) {
handleEthereum();
} else {
// TODO: Refactor and change the way we hide and display items on our webpage
document.getElementById(idJoin).style.display = "none";
document.getElementById(idAddAccount).style.display = "none";
document.getElementById(idAddAllAccounts).style.display = "none";
document.getElementById(idRevokeUserID).style.display = "none";
const statusArea = document.getElementById(idStatus);
statusArea.innerText = 'Connecting to Metamask...';
window.addEventListener('ethereum#initialized', handleEthereum, {
once: true,
});

// If the event is not dispatched by the end of the timeout,
// the user probably doesn't have MetaMask installed.
setTimeout(handleEthereum, 3000); // 3 seconds
}
}

function handleEthereum() {
const { ethereum } = window;
if (ethereum && ethereum.isMetaMask) {
initialize()
} else {
const statusArea = document.getElementById(idStatus);
statusArea.innerText = 'Please install MetaMask to use Obscuro Gateway.';
}
}

async function populateAccountsTable(document, tableBody, userID) {
tableBody.innerHTML = '';
const accounts = await ethereum.request({method: 'eth_requestAccounts'});
for (const account of accounts) {
const row = document.createElement('tr');

const accountCell = document.createElement('td');
accountCell.textContent = account;
row.appendChild(accountCell);

const statusCell = document.createElement('td');

statusCell.textContent = await accountIsAuthenticated(account, userID); // Status is empty for now
row.appendChild(statusCell);

tableBody.appendChild(row);
}
}

const initialize = async () => {
const joinButton = document.getElementById(idJoin);
const addAccountButton = document.getElementById(idAddAccount);
const addAllAccountsButton = document.getElementById(idAddAllAccounts);
const revokeUserIDButton = document.getElementById(idRevokeUserID);
const statusArea = document.getElementById(idStatus);
const userIDArea = document.getElementById(idUserID);

// get ObscuroGatewayUserID from local storage
let userID = localStorage.getItem("ObscuroGatewayUserID")
const accountsTable = document.getElementById('accountsTable')
const tableBody = document.getElementById('tableBody');
// getUserID from the gateway with getStorageAt method
let userID = await getUserID()

// check if userID exists and has correct type and length (is valid) and display either
// option to join or to add new account to existing user
// 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)) {
userIDArea.innerText = "Your userID is: " + userID
joinButton.style.display = "none"
addAccountButton.style.display = "block"
addAllAccountsButton.style.display = "block"
revokeUserIDButton.style.display = "block"
accountsTable.style.display = "block"
await populateAccountsTable(document, tableBody, userID)
} else {
joinButton.style.display = "block"
addAccountButton.style.display = "none"
revokeUserIDButton.style.display = "none"
accountsTable.style.display = "none"
}

let ethereum = window.ethereum;
if (!ethereum) {
joinButton.style.display = "none"
addAccountButton.style.display = "none"
statusArea.innerText = "Please install MetaMask to use Obscuro Gateway"
}


joinButton.addEventListener(eventClick, async () => {
// join Obscuro Gateway
const joinResp = await fetch(
Expand All @@ -156,7 +241,6 @@ const initialize = () => {

// save userID to the localStorage and hide button that enables users to join
userID = await joinResp.text();
localStorage.setItem("ObscuroGatewayUserID", userID);
joinButton.style.display = "none"

// add Obscuro network to Metamask
Expand All @@ -166,39 +250,44 @@ const initialize = () => {
return
}
statusArea.innerText = "Successfully joined Obscuro Gateway";
userIDArea.innerText = "Your userID is: " + userID
// 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)
})

addAccountButton.addEventListener(eventClick, async () => {
// check if we have userID and it is correct length
if (!isValidUserIDFormat(userID)){
// 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"
}

// Get account and prompt user to sign joining with selected account
// Get an account and prompt user to sign joining with a selected account
const accounts = await ethereum.request({method: metamaskRequestAccounts});
if (accounts.length === 0) {
statusArea.innerText = "No MetaMask accounts found."
return
}
let authenticateAccountStatus = await authenticateAccountWithObscuroGateway(ethereum, accounts[0], userID)
statusArea.innerText = "\n Authentication status: " + authenticateAccountStatus
//statusArea.innerText = "\n Authentication status: " + authenticateAccountStatus
accountsTable.style.display = "block"
await populateAccountsTable(document, tableBody, userID)
})

addAllAccountsButton.addEventListener(eventClick, async () => {
// check if we have userID and it is correct length
if (!isValidUserIDFormat(userID)){
// 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"
}

// Get account and prompt user to sign joining with selected account
// Get an account and prompt user to sign joining with selected account
const accounts = await ethereum.request({method: metamaskRequestAccounts});
if (accounts.length === 0) {
statusArea.innerText = "No MetaMask accounts found."
Expand All @@ -207,25 +296,29 @@ const initialize = () => {

for (const account of accounts) {
let authenticateAccountStatus = await authenticateAccountWithObscuroGateway(ethereum, account, userID)
statusArea.innerText += "\n Authentication status: " + authenticateAccountStatus + " for account: " + account;
accountsTable.style.display = "block"
await populateAccountsTable(document, tableBody, userID)
}
})

revokeUserIDButton.addEventListener(eventClick, async () => {
let result = await revokeUserID(userID);

await populateAccountsTable(document, tableBody, userID)

if (result) {
localStorage.removeItem("ObscuroGatewayUserID")
joinButton.style.display = "block";
revokeUserIDButton.style.display = "none";
addAllAccountsButton.style.display = "none";
userIDArea.innerText = "";
statusArea.innerText = "Revoking UserID successful. Please remove current network from Metamask."
addAccountButton.style.display = "none";
}else{
accountsTable.style.display = "none"
} else {
statusArea.innerText = "Revoking UserID failed";
}
})

}

window.addEventListener(eventDomLoaded, initialize);
window.addEventListener(eventDomLoaded, checkIfMetamaskIsLoaded);
19 changes: 18 additions & 1 deletion tools/walletextension/api/staticOG/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,21 @@ button {
/*Formats the block-decoder form.*/
form { display: table; }
label { display: table-cell; }
input { display: table-cell; }
input { display: table-cell; }

/* basic style for the accounts table*/
table {
border-collapse: collapse;
width: fit-content;
margin: auto; /* Center the table */
background-color: #333; /* Dark Background */
color: white; /* Light Text */
}
th, td {
border: 1px solid #666; /* Darker Border */
padding: 15px;
text-align: center;
}
th {
background-color: #444; /* Slightly Darker Header */
}

0 comments on commit 8a0e833

Please sign in to comment.