Skip to content

Commit

Permalink
Merge pull request #1614 from obscuronet/cais-gateway-ui-changes
Browse files Browse the repository at this point in the history 
Cais gateway UI changes
  • Loading branch information
@CaisManai
CaisManai authored Oct 20, 2023
2 parents 85f05f9 + 7f4aafd commit 4c5c8b2
Show file tree
Hide file tree
Showing 4 changed files with 380 additions and 36 deletions.
79 changes: 56 additions & 23 deletions tools/walletextension/api/staticOG/index.html
View file
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
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 @@ -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);

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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 4c5c8b2

Please sign in to comment.