Skip to content

Commit

Permalink
Merge pull request #1631 from obscuronet/cais-ui-updates
Browse files Browse the repository at this point in the history 
Cais UI updates
  • Loading branch information
@CaisManai
CaisManai authored Oct 31, 2023
2 parents 97ed3c3 + a5a9aa7 commit fb4c449
Show file tree
Hide file tree
Showing 3 changed files with 425 additions and 79 deletions.
140 changes: 89 additions & 51 deletions tools/walletextension/api/staticOG/index.html
View file
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>
<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
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";
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);
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)
}

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

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

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

0 comments on commit fb4c449

Please sign in to comment.