From a51fdd88915636767260ca3673e30e4340d124b0 Mon Sep 17 00:00:00 2001 From: CaisManai Date: Sun, 29 Oct 2023 19:33:37 +0000 Subject: [PATCH 1/5] updates as per team feedback --- tools/walletextension/api/staticOG/index.html | 132 +++++++++------ .../api/staticOG/javascript.js | 95 ++++++++--- tools/walletextension/api/staticOG/style.css | 152 ++++++++++++++++-- 3 files changed, 294 insertions(+), 85 deletions(-) diff --git a/tools/walletextension/api/staticOG/index.html b/tools/walletextension/api/staticOG/index.html index b97cfd09bb..88d80d1323 100644 --- a/tools/walletextension/api/staticOG/index.html +++ b/tools/walletextension/api/staticOG/index.html @@ -4,65 +4,95 @@ Obscuro Gateway - + -
- -
+
+ +
- + -
-

Welcome to the Obscuro Gateway

-
-
Three clicks to setup encrypted communication between MetaMask and the Obscuro Network. - Upon hitting Begin, you'll be asked to: -
    -
  1. - 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. -
    2. -
  2. - Allow MetaMask to switch networks to the Obscuro Testnet network. -
    3. -
  3. - Sign the Signature Request (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. -
    4. -
-
-
- You are set up on Obscuro. Your connected accounts are below: + +
+
+
+
+
+

Welcome to the Obscuro Gateway

+ +
Three clicks to setup encrypted communication between MetaMask and the Obscuro + Network.: +
    +
  1. + Hit Connect to Obscuro and start your journey +
    2. +
  2. + Allow MetaMask to switch networks to the Obscuro Testnet +
    3. +
  3. + Sign the Signature Request (this is not a transaction) +
    4. +
+
+ + +
+

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.

+ +

+ 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. +

+

+ Basic RPC URL: https://testnet.obscu.ro +
+ Chain ID: 443 +

+
+ +
+
+ You are set up on Obscuro. Your connected accounts are below: +
+ + + + + + Connect to Obscuro Testnet + + + + + + + + + + + +
AccountConnected
+ + +

+ +
+
+
+
- - - - - - Begin - - - - - - - - - - - -
AccountConnected
- -

- -
+
+
-
+
- - - + \ No newline at end of file diff --git a/tools/walletextension/api/staticOG/javascript.js b/tools/walletextension/api/staticOG/javascript.js index 5842b7418f..4fe530aee8 100644 --- a/tools/walletextension/api/staticOG/javascript.js +++ b/tools/walletextension/api/staticOG/javascript.js @@ -1,20 +1,24 @@ +const gatewayaddress = "https://testnet.obscu.ro" 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"; -const pathJoin = obscuroGatewayVersion + "/join/"; -const pathAuthenticate = obscuroGatewayVersion + "/authenticate/"; -const pathQuery = obscuroGatewayVersion + "/query/"; -const pathRevoke = obscuroGatewayVersion + "/revoke/"; -const pathVersion = "/version/"; +const pathJoin = gatewayaddress + "/" + obscuroGatewayVersion + "/join/"; +const pathAuthenticate = gatewayaddress + "/" + obscuroGatewayVersion + "/authenticate/"; +const pathQuery = gatewayaddress + "/" + obscuroGatewayVersion + "/query/"; +const pathRevoke = gatewayaddress + "/" + obscuroGatewayVersion + "/revoke/"; +const pathVersion = gatewayaddress + "/" + "version/"; const obscuroChainIDDecimal = 443; const methodPost = "post"; const methodGet = "get"; @@ -30,7 +34,7 @@ function isValidUserIDFormat(value) { return typeof value === 'string' && value.length === 64; } -let obscuroGatewayAddress = window.location.protocol + "//" + window.location.host; +let obscuroGatewayAddress = gatewayaddress; let provider = null; @@ -244,7 +248,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); @@ -269,12 +279,30 @@ async function switchToObscuroNetwork() { return -1 } +function copyFaucetRequest() { + // Get the text field + var copyText = document.getElementById("myInput"); + + // Select the text field + copyText.select(); + copyText.setSelectionRange(0, 99999); // For mobile devices + + // Copy the text inside the text field + navigator.clipboard.writeText(copyText.value); + + // Alert the copied text + alert("Copied the text: " + copyText.value); + } + 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); @@ -285,23 +313,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) } @@ -405,9 +439,32 @@ const initialize = async () => { statusArea.innerText = "Revoking UserID failed"; } }) + beginBox.style.visibility = "visible"; spinner.style.visibility = "hidden"; } -window.addEventListener(eventDomLoaded, checkIfMetamaskIsLoaded); +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); \ No newline at end of file diff --git a/tools/walletextension/api/staticOG/style.css b/tools/walletextension/api/staticOG/style.css index e17bd8d4f1..0c470ae925 100644 --- a/tools/walletextension/api/staticOG/style.css +++ b/tools/walletextension/api/staticOG/style.css @@ -19,19 +19,15 @@ html { .logo { height: 100px; } - + .begin-box { - position: absolute; - top: 50%; - left: 50%; - width: 800px; padding: 40px; - transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; visibility: hidden; + width: 800px; } .begin-box h2 { @@ -230,21 +226,51 @@ h2 { margin: auto; } +.tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted black; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 800px; + background-color: black; + color: #fff; + border-radius: 6px; + padding: 30px; + + /* Position the tooltip */ + position: absolute; + z-index: 1; +} + +.tooltip:hover .tooltiptext { + visibility: visible; +} + +#moreInfo { + width: 80px; +} + #versionDisplay { - position: fixed; - bottom: 10px; - right: 10px; - font-size: 0.5rem; + position: fixed; + bottom: 10px; + right: 10px; + font-size: 0.5rem; } #status { - color: red; + color: red; +} + +.joined-button { + margin-top: 10px; + padding: 10px } #revokeUserID { - margin-top: 10px; - padding: 10px; - display: none; + display: none; } .spinner { @@ -316,4 +342,100 @@ h2 { opacity: .1; } } - \ No newline at end of file + + .wrapper { + position: relative; + top: 50%; + margin: auto; + width: 800px; + height: 500px; + } + + :root { + --background-rgb: 2 6 23; + --background-light-rgb: 30 41 59; + + --hyperplexed-main-rgb: 41 121 255; + --hyperplexed-main-light-rgb: 56 182 255; + --hyperplexed-secondary-rgb: 42 252 152; + + --card-size: 800px; + --font-size: 0.9rem; + } + + .card-track { + height: 100%; + width: var(--card-size); + display: flex; + align-items: center; + position: relative; + } + + .card-wrapper { + width: 800px; + position: relative; + } + + .card { + display: flex; + align-items: center; + justify-content: center; + aspect-ratio: 1; + position: relative; + border-radius: 2rem; + overflow: hidden; + cursor: pointer; + width: 100%; + height:100%; + } + + .card-image { + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + position: relative; + z-index: 4; + } + + .card-gradient { + height: 100%; + width: 100%; + position: absolute; + background: radial-gradient( + rgb(var(--background-light-rgb)) 40%, + rgb(var(--hyperplexed-main-rgb)) 50%, + rgb(var(--hyperplexed-main-light-rgb)), + rgb(var(--hyperplexed-secondary-rgb)) + ); + mix-blend-mode: darken; + pointer-events: none; + z-index: 3; + } + + .card-letters { + --x: 0px; + --y: 0px; + position: absolute; + left: 0px; + top: 0px; + height: 85%; + width: 100%; + color: white; + font-size: var(--font-size); + font-weight: 500; + word-wrap: break-word; + opacity: 0; + transition: opacity 400ms; + -webkit-mask-image: radial-gradient( + calc(var(--card-size) * 0.5) circle at var(--x) var(--y), + rgb(255 255 255) 20%, + rgb(255 255 255 / 25%), + transparent + ); + scale: 1.03; + } + + .card:hover .card-letters { + opacity: 1; + } \ No newline at end of file From 13ecd449bfdc5a25bb3ab9a052fb02032cf489af Mon Sep 17 00:00:00 2001 From: CaisManai Date: Tue, 31 Oct 2023 16:51:59 +0000 Subject: [PATCH 2/5] Team feedback changes --- tools/walletextension/api/staticOG/index.html | 40 ++-- .../api/staticOG/javascript.js | 12 ++ tools/walletextension/api/staticOG/style.css | 179 +++++++++++++++--- 3 files changed, 192 insertions(+), 39 deletions(-) diff --git a/tools/walletextension/api/staticOG/index.html b/tools/walletextension/api/staticOG/index.html index 88d80d1323..b090451082 100644 --- a/tools/walletextension/api/staticOG/index.html +++ b/tools/walletextension/api/staticOG/index.html @@ -7,6 +7,7 @@ + @@ -38,24 +39,11 @@

Welcome to the Obscuro Gateway

- + + -
-

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.

- -

- 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. -

-

- Basic RPC URL: https://testnet.obscu.ro -
- Chain ID: 443 -

-
+
You are set up on Obscuro. Your connected accounts are below: @@ -93,6 +81,26 @@

Welcome to the Obscuro Gateway

+ + \ No newline at end of file diff --git a/tools/walletextension/api/staticOG/javascript.js b/tools/walletextension/api/staticOG/javascript.js index 4fe530aee8..8476fc03cc 100644 --- a/tools/walletextension/api/staticOG/javascript.js +++ b/tools/walletextension/api/staticOG/javascript.js @@ -444,6 +444,18 @@ const initialize = async () => { spinner.style.visibility = "hidden"; } +$('#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))], diff --git a/tools/walletextension/api/staticOG/style.css b/tools/walletextension/api/staticOG/style.css index 0c470ae925..439b2ad075 100644 --- a/tools/walletextension/api/staticOG/style.css +++ b/tools/walletextension/api/staticOG/style.css @@ -226,29 +226,6 @@ h2 { margin: auto; } -.tooltip { - position: relative; - display: inline-block; - border-bottom: 1px dotted black; -} - -.tooltip .tooltiptext { - visibility: hidden; - width: 800px; - background-color: black; - color: #fff; - border-radius: 6px; - padding: 30px; - - /* Position the tooltip */ - position: absolute; - z-index: 1; -} - -.tooltip:hover .tooltiptext { - visibility: visible; -} - #moreInfo { width: 80px; } @@ -438,4 +415,160 @@ h2 { .card:hover .card-letters { opacity: 1; + } + + * { + box-sizing: border-box; + } + + html.modal-active, body.modal-active { + overflow: hidden; + } + + #modal-container { + position: fixed; + display: table; + height: 100%; + width: 100%; + top: 0; + left: 0; + transform: scale(0); + z-index: 6; + } + #modal-container.four { + z-index: 5; + transform: scale(1); + } + #modal-container.four .modal-background { + background: rgba(0, 0, 0, 0.7); + } + #modal-container.four .modal-background .modal { + animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; + } + #modal-container.four + .content { + z-index: 6; + animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; + } + #modal-container.four.out .modal-background .modal { + animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; + } + #modal-container.four.out + .content { + animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; + } + .disappear { + animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; + } + #modal-container .modal-background { + display: table-cell; + background: rgba(0, 0, 0, 0.8); + text-align: center; + vertical-align: middle; + } + #modal-container .modal-background .modal { + background: #000; + padding: 50px; + display: inline-block; + border-radius: 3px; + position: relative; + width: 800px; + } + #modal-container .modal-background .modal p { + text-align: left; + } + #modal-container .modal-background .modal h2 { + font-size: 25px; + line-height: 25px; + margin-bottom: 15px; + } + #modal-container .modal-background .modal .modal-svg { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + border-radius: 3px; + } + #modal-container .modal-background .modal .modal-svg rect { + stroke: #000; + stroke-width: 2px; + stroke-dasharray: 778; + stroke-dashoffset: 778; + } + + .content { + min-height: 100%; + height: 100%; + background: #000; + position: relative; + z-index: 5; + } + .content h1 { + padding: 75px 0 30px 0; + text-align: center; + font-size: 30px; + line-height: 30px; + } + .content .buttons { + max-width: 800px; + margin: 0 auto; + padding: 0; + text-align: center; + } + .content .buttons .button { + display: inline-block; + text-align: center; + padding: 10px 15px; + margin: 10px; + background: red; + font-size: 18px; + background-color: #efefef; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + cursor: pointer; + } + .content .buttons .button:hover { + color: white; + background: #009bd5; + } + + @keyframes blowUpContent { + 0% { + transform: scale(1); + opacity: 1; + } + 99.9% { + transform: scale(2); + opacity: 0; + } + 100% { + transform: scale(0); + } + } + @keyframes blowUpContentTwo { + 0% { + transform: scale(2); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } + } + @keyframes blowUpModal { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } + } + @keyframes blowUpModalTwo { + 0% { + transform: scale(1); + opacity: 1; + } + 100% { + transform: scale(0); + opacity: 0; + } } \ No newline at end of file From a4ad1ca30060b6adfff66eed5864605c5806c7e9 Mon Sep 17 00:00:00 2001 From: CaisManai Date: Tue, 31 Oct 2023 16:56:16 +0000 Subject: [PATCH 3/5] Adding correct params --- tools/walletextension/api/staticOG/javascript.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/tools/walletextension/api/staticOG/javascript.js b/tools/walletextension/api/staticOG/javascript.js index 8476fc03cc..830b2c3fa8 100644 --- a/tools/walletextension/api/staticOG/javascript.js +++ b/tools/walletextension/api/staticOG/javascript.js @@ -1,4 +1,3 @@ -const gatewayaddress = "https://testnet.obscu.ro" const eventClick = "click"; const eventDomLoaded = "DOMContentLoaded"; const idJoin = "join"; @@ -14,11 +13,11 @@ const idRequestTokens = "requestTokens"; const idBegin = "begin-box"; const idSpinner = "spinner"; const obscuroGatewayVersion = "v1"; -const pathJoin = gatewayaddress + "/" + obscuroGatewayVersion + "/join/"; -const pathAuthenticate = gatewayaddress + "/" + obscuroGatewayVersion + "/authenticate/"; -const pathQuery = gatewayaddress + "/" + obscuroGatewayVersion + "/query/"; -const pathRevoke = gatewayaddress + "/" + obscuroGatewayVersion + "/revoke/"; -const pathVersion = gatewayaddress + "/" + "version/"; +const pathJoin = obscuroGatewayVersion + "/join/"; +const pathAuthenticate = obscuroGatewayVersion + "/authenticate/"; +const pathQuery = obscuroGatewayVersion + "/query/"; +const pathRevoke = obscuroGatewayVersion + "/revoke/"; +const pathVersion = "/version/"; const obscuroChainIDDecimal = 443; const methodPost = "post"; const methodGet = "get"; @@ -34,7 +33,7 @@ function isValidUserIDFormat(value) { return typeof value === 'string' && value.length === 64; } -let obscuroGatewayAddress = gatewayaddress; +let obscuroGatewayAddress = window.location.protocol + "//" + window.location.host; let provider = null; From 48fbb757e09be4d98087c51ebd0aee35bc00e4de Mon Sep 17 00:00:00 2001 From: Cais <50658567+CaisManai@users.noreply.github.com> Date: Tue, 31 Oct 2023 17:12:20 +0000 Subject: [PATCH 4/5] Update javascript.js --- .../walletextension/api/staticOG/javascript.js | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/tools/walletextension/api/staticOG/javascript.js b/tools/walletextension/api/staticOG/javascript.js index 830b2c3fa8..7182f33d6d 100644 --- a/tools/walletextension/api/staticOG/javascript.js +++ b/tools/walletextension/api/staticOG/javascript.js @@ -278,21 +278,6 @@ async function switchToObscuroNetwork() { return -1 } -function copyFaucetRequest() { - // Get the text field - var copyText = document.getElementById("myInput"); - - // Select the text field - copyText.select(); - copyText.setSelectionRange(0, 99999); // For mobile devices - - // Copy the text inside the text field - navigator.clipboard.writeText(copyText.value); - - // Alert the copied text - alert("Copied the text: " + copyText.value); - } - const initialize = async () => { const joinButton = document.getElementById(idJoin); const moreInfoButton = document.getElementById(idMoreInfo); @@ -478,4 +463,4 @@ card.onmousemove = e => handleOnMove(e); card.ontouchmove = e => handleOnMove(e.touches[0]); -window.addEventListener(eventDomLoaded, checkIfMetamaskIsLoaded); \ No newline at end of file +window.addEventListener(eventDomLoaded, checkIfMetamaskIsLoaded); From a5a9aa78d530df6c593769aaa9e65f5541635c67 Mon Sep 17 00:00:00 2001 From: Cais <50658567+CaisManai@users.noreply.github.com> Date: Tue, 31 Oct 2023 17:13:05 +0000 Subject: [PATCH 5/5] Update index.html --- tools/walletextension/api/staticOG/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tools/walletextension/api/staticOG/index.html b/tools/walletextension/api/staticOG/index.html index b090451082..36c7ddee24 100644 --- a/tools/walletextension/api/staticOG/index.html +++ b/tools/walletextension/api/staticOG/index.html @@ -5,9 +5,9 @@ Obscuro Gateway + - @@ -103,4 +103,4 @@

Welcome to the Obscuro Gateway

- \ No newline at end of file +