Skip to content
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

Cais gateway UI changes #1614

Merged
merged 7 commits into from
Oct 20, 2023
Merged

Cais gateway UI changes #1614

Show file tree
Hide file tree
Changes from 5 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
75 changes: 54 additions & 21 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,7 +2,7 @@
<html lang="en">

<head>
<title>Obscuro Gateway </title>
<title>Obscuro Gateway</title>
<link rel="icon" type="favicon-32x32" sizes="32x32" href="favicon-32x32.png">
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
type="application/javascript"></script>
CaisManai marked this conversation as resolved.
Show resolved Hide resolved
CaisManai marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -11,25 +11,58 @@
</head>

<body>
<div class="container-fluid">
<img src="obscuro.svg" alt="Obscuro" class="logo">
</div>
CaisManai marked this conversation as resolved.
Show resolved Hide resolved
CaisManai marked this conversation as resolved.
Show resolved Hide resolved

<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>
CaisManai marked this conversation as resolved.
Show resolved Hide resolved

<div class="begin-box" id="begin-box">
<h2>Welcome to the Obscuro Gateway</h2>
<form>
<div id="information">3 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
CaisManai marked this conversation as resolved.
Show resolved Hide resolved
</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 have to do this for each account
</li>
CaisManai marked this conversation as resolved.
Show resolved Hide resolved
</ol>
</div>
<div id="information2">
You are set up on Obscuro. Your connected accounts are below:
</div>
<a id="join">
<span></span>
<span></span>
<span></span>
<span></span>
Begin
CaisManai marked this conversation as resolved.
Show resolved Hide resolved
</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" style="display: none">Revoke Accounts</button>
CaisManai marked this conversation as resolved.
Show resolved Hide resolved
<p id="status"></p>
</form>
</div>

<div id="versionDisplay"></div>
</body>
</html>
</html>



27 changes: 26 additions & 1 deletion tools/walletextension/api/staticOG/javascript.js
View file
Open in desktop
CaisManai marked this conversation as resolved.
Show resolved Hide resolved
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";
const obscuroGatewayVersion = "v1";
const pathJoin = obscuroGatewayVersion + "/join/";
const pathAuthenticate = obscuroGatewayVersion + "/authenticate/";
Expand Down Expand Up @@ -271,22 +275,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";
CaisManai marked this conversation as resolved.
Show resolved Hide resolved
}

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 +324,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 +368,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 +395,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 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
Loading