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 UI updates #1631

Merged
merged 5 commits into from
Oct 31, 2023
Merged

Cais UI updates #1631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a51fdd8
updates as per team feedback
Revelationxl Oct 29, 2023
13ecd44
Team feedback changes
Revelationxl Oct 31, 2023
a4ad1ca
Adding correct params
Revelationxl Oct 31, 2023
48fbb75
Update javascript.js
CaisManai Oct 31, 2023
a5a9aa7
Update index.html
CaisManai Oct 31, 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
140 changes: 89 additions & 51 deletions tools/walletextension/api/staticOG/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,103 @@
<head>
<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 src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.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>
<div class="container-fluid">
<img src="obscuro.svg" alt="Obscuro logo" class="logo">
</div>

<div class="spinner" id="spinner"></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>
<div class="wrapper">
<div class="card-track">
<div class="card">
<div class="card-image">
<div class="begin-box" id="begin-box">
<h2 id="welcome">Welcome to the Obscuro Gateway</h2>
<form>
<div id="information">Three clicks to setup encrypted communication between MetaMask and the Obscuro
Network.:
<ol>
<li>
Hit Connect to Obscuro and start your journey
</li>
<li>
Allow MetaMask to switch networks to the Obscuro Testnet
</li>
<li>
Sign the <b>Signature Request</b> (this is not a transaction)
</li>
</ol>
</div>

<span id="moreInfo">
<button type="button">More info</button>
</span>

<br>
<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>
Connect to Obscuro Testnet
</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 joined-button" id="revokeUserID">Revoke
Accounts</button>
<button class="btn btn-primary btn-lg btn-block mb-3 joined-button" id="requestTokens"
onclick=" window.open('https://discord.gg/crRtBAWFjx','_blank')">Request tokens on Discord</button>
Copy link

Choose a reason for hiding this comment

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

The onclick attribute is used to open a new window with a Discord link. This is an old-fashioned way of attaching event handlers and it mixes JavaScript code with HTML markup. Consider moving this logic to javascript.js and use addEventListener to attach the event handler.

- <button class="btn btn-primary btn-lg btn-block mb-3 joined-button" id="requestTokens"
-    onclick=" window.open('https://discord.gg/crRtBAWFjx','_blank')">Request tokens on Discord</button>
+ <button class="btn btn-primary btn-lg btn-block mb-3 joined-button" id="requestTokens">Request tokens on Discord</button>

In javascript.js:

document.getElementById('requestTokens').addEventListener('click', function() {
    window.open('https://discord.gg/crRtBAWFjx','_blank');
});
Commitable suggestion (Beta)
Suggested change
onclick=" window.open('https://discord.gg/crRtBAWFjx','_blank')">Request tokens on Discord</button>
<button class="btn btn-primary btn-lg btn-block mb-3 joined-button" id="requestTokens">Request tokens on Discord</button>

In javascript.js:

document.getElementById('requestTokens').addEventListener('click', function() {
    window.open('https://discord.gg/crRtBAWFjx','_blank');
});

<p id="status"></p>
</form>
</div>
</div>
<div class="card-gradient"></div>
<div class="card-letters"></div>
</div>
</div>
</div>

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

<div id="modal-container">
<div class="modal-background">
<div class="modal">
<p>By connecting your wallet to Obscuro and signing the signature request you will get a unique user
id, which is also your viewing key. It is contained in the RPC link and unique for each user. Do
not share this unless you want others to see the details of your transactions.</p>

<p>
Signing the Signature Request is completely secure. It’s not a transaction so cannot spend any
of your assets and it doesn’t give Obscuro control over your account.
</p>
<p>
Basic RPC URL: https://testnet.obscu.ro
<br>
Chain ID: 443
</p>
</div>
</div>
</div>
</body>

</html>
79 changes: 66 additions & 13 deletions tools/walletextension/api/staticOG/javascript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
const eventClick = "click";
const eventDomLoaded = "DOMContentLoaded";
const idJoin = "join";
const idMoreInfo = "moreInfo";
const idRevokeUserID = "revokeUserID";
const idStatus = "status";
const idAccountsTable = "accountsTable";
const idTableBody = "tableBody";
const idInformation = "information";
const idInformation2 = "information2";
const idWelcome = "welcome";
const idRequestTokens = "requestTokens";
const idBegin = "begin-box";
const idSpinner = "spinner";
const obscuroGatewayVersion = "v1";
Comment on lines 1 to 15
Copy link

Choose a reason for hiding this comment

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

The constants are well defined and follow a consistent naming convention. However, consider grouping related constants into an object or enum for better organization and readability.

Expand Down Expand Up @@ -244,7 +247,13 @@ async function populateAccountsTable(document, tableBody, userID) {

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

statusCell.textContent = await accountIsAuthenticated(account, userID); // Status is empty for now
let x = await accountIsAuthenticated(account, userID); // Status is empty for now
if (x == true) {
statusCell.textContent = "\u2705";
} else {
statusCell.textContent = "\u274C";
}

row.appendChild(statusCell);

tableBody.appendChild(row);
Comment on lines 247 to 259
Copy link

Choose a reason for hiding this comment

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

The use of Unicode characters for checkmark and cross symbols is a good approach for visual representation of status. However, consider adding a comment explaining what these Unicode characters represent for better readability.

Expand All @@ -271,10 +280,13 @@ async function switchToObscuroNetwork() {

const initialize = async () => {
const joinButton = document.getElementById(idJoin);
const moreInfoButton = document.getElementById(idMoreInfo);
const revokeUserIDButton = document.getElementById(idRevokeUserID);
const statusArea = document.getElementById(idStatus);
const informationArea = document.getElementById(idInformation);
const informationArea2 = document.getElementById(idInformation2);
const welcome = document.getElementById(idWelcome);
const requestTokens = document.getElementById(idRequestTokens);
const beginBox = document.getElementById(idBegin);
const spinner = document.getElementById(idSpinner);

Expand All @@ -285,23 +297,29 @@ const initialize = async () => {
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"
joinButton.style.display = "block";
moreInfoButton.style.display = "block";
revokeUserIDButton.style.display = "none";
requestTokens.style.display = "none";
accountsTable.style.display = "none";
informationArea.style.display = "block";
informationArea2.style.display = "none";
welcome.style.display = "block";

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"

joinButton.style.display = "none";
moreInfoButton.style.display = "none";
informationArea.style.display = "none";
informationArea2.style.display = "block";
revokeUserIDButton.style.display = "block";
accountsTable.style.display = "block";
welcome.style.display = "none";
requestTokens.style.display = "block";

await populateAccountsTable(document, tableBody, userID)
}

Comment on lines 297 to 325
Copy link

Choose a reason for hiding this comment

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

The functions displayOnlyJoin and displayConnectedAndJoinedSuccessfully are manipulating the DOM directly to show or hide elements. This is fine, but consider using a library or framework that provides a more declarative way to handle UI state, such as React or Vue.js, for better maintainability and scalability.

Expand Down Expand Up @@ -405,9 +423,44 @@ const initialize = async () => {
statusArea.innerText = "Revoking UserID failed";
}
})
Comment on lines 423 to 425
Copy link

Choose a reason for hiding this comment

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

The error message "Revoking UserID failed" is a bit vague. Consider providing a more detailed error message or handling different error scenarios separately to give the user a better understanding of what went wrong.


beginBox.style.visibility = "visible";
spinner.style.visibility = "hidden";
}

window.addEventListener(eventDomLoaded, checkIfMetamaskIsLoaded);
$('#moreInfo').click(function(){
var buttonId = 'four';
$('#modal-container').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active');
})

$('#modal-container').click(function(){
$(this).addClass('out');
$(this).addClass('disappear');
$('body').removeClass('modal-active');
});
Comment on lines +431 to +441
Copy link

Choose a reason for hiding this comment

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

The modal opening and closing logic is well implemented. However, consider adding some error handling or checks to ensure that the elements exist and the operations are successful.


const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+;:'|?/><~";

const randomChar = () => chars[Math.floor(Math.random() * (chars.length - 1))],
randomString = length => Array.from(Array(length)).map(randomChar).join("");

const card = document.querySelector(".card"),
letters = card.querySelector(".card-letters");

const handleOnMove = e => {
const rect = card.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;

letters.style.setProperty("--x", `${x}px`);
letters.style.setProperty("--y", `${y}px`);

letters.innerText = randomString(1700);
}

card.onmousemove = e => handleOnMove(e);

card.ontouchmove = e => handleOnMove(e.touches[0]);

window.addEventListener(eventDomLoaded, checkIfMetamaskIsLoaded);
Loading
Loading