Skip to content

Cais gateway UI changes #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: base-sha/d494bc8c6ad4c6f1008838b2a8d91e044ab53d63
Choose a base branch
from
Open

Cais gateway UI changes #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4321d38
Adding changes for the gateway UI
Revelationxl Oct 20, 2023
13cacfb
Adding original params
Revelationxl Oct 20, 2023
b87194d
Fixing display issue
Revelationxl Oct 20, 2023
ec52d10
adding original params
Revelationxl Oct 20, 2023
4f0407d
Changing wording slightly
Revelationxl Oct 20, 2023
1a227b2
Addressing requested changes
Revelationxl Oct 20, 2023
7f4aafd
Adding changes from CodeRabbit
Revelationxl Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 56 additions & 23 deletions tools/walletextension/api/staticOG/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>



31 changes: 28 additions & 3 deletions tools/walletextension/api/staticOG/javascript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Comment on lines +8 to +11
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sourcery logo nitpick (code_refinement): Ensure variable naming consistency.

The naming convention for DOM element IDs and their corresponding JavaScript constants should be consistent to improve code readability and maintainability.

Suggested change
const idInformation = "information";
const idInformation2 = "information2";
const idBegin = "begin-box";
const idSpinner = "spinner";
const idInformation = "information";
const idInformation2 = "information2";
const idBeginBox = "begin-box"; // Adjusted for consistency
const idSpinner = "spinner";

const obscuroGatewayVersion = "v1";
const pathJoin = obscuroGatewayVersion + "/join/";
const pathAuthenticate = obscuroGatewayVersion + "/authenticate/";
Expand Down Expand Up @@ -51,7 +55,6 @@ async function fetchAndDisplayVersion() {
}
}


function getNetworkName(gatewayAddress) {
switch(gatewayAddress) {
case 'https://uat-testnet.obscu.ro':
Expand All @@ -63,7 +66,6 @@ function getNetworkName(gatewayAddress) {
}
}


function getRPCFromUrl(gatewayAddress) {
// get the correct RPC endpoint for each network
switch(gatewayAddress) {
Expand Down Expand Up @@ -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);
Comment on lines +276 to +279
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sourcery logo suggestion (edge_case_not_handled): Consider handling potential null values when accessing DOM elements.

When accessing DOM elements using getElementById, it's a good practice to check if the returned value is not null to avoid runtime errors in cases where the element might not exist.

Suggested change
const informationArea = document.getElementById(idInformation);
const informationArea2 = document.getElementById(idInformation2);
const beginBox = document.getElementById(idBegin);
const spinner = document.getElementById(idSpinner);
const informationArea = document.getElementById(idInformation);
if (!informationArea) {
console.error(`Element with ID ${idInformation} not found.`);
}
const informationArea2 = document.getElementById(idInformation2);
if (!informationArea2) {
console.error(`Element with ID ${idInformation2} not found.`);
}
const beginBox = document.getElementById(idBegin);
if (!beginBox) {
console.error(`Element with ID ${idBegin} not found.`);
}
const spinner = document.getElementById(idSpinner);
if (!spinner) {
console.error(`Element with ID ${idSpinner} not found.`);
}


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)
}

Expand All @@ -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
Expand Down Expand Up @@ -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) {
Expand All @@ -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)
Expand All @@ -382,6 +405,8 @@ const initialize = async () => {
statusArea.innerText = "Revoking UserID failed";
}
})
beginBox.style.visibility = "visible";
spinner.style.visibility = "hidden";
}

window.addEventListener(eventDomLoaded, checkIfMetamaskIsLoaded);
Expand Down
18 changes: 18 additions & 0 deletions tools/walletextension/api/staticOG/obscuro.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading