Implement GUI until mixing starts
MODIFY
HiddenWallet/HiddenWallet.GUI/app/css/default.css
HiddenWallet/HiddenWallet.GUI/app/css/default.css
@@ -65,7 +65,7 @@ body {
#content {
overflow-y: auto;
position: relative;
- max-height: 340px;
+ max-height: 430px;
}
.glyphicon.spinning {
@@ -92,3 +92,47 @@ body {
-webkit-transform: rotate(360deg);
}
}
+
+/* Dropdown Button */
+.dropbtn {
+ cursor: pointer;
+}
+
+ /* Dropdown button on hover & focus */
+ .dropbtn:hover, .dropbtn:focus {
+ background-color: #3e8e41;
+ }
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f9f9f9;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+ /* Links inside the dropdown */
+ .dropdown-content a {
+ color: black;
+ padding: 10px 14px;
+ text-decoration: none;
+ display: block;
+ }
+
+ /* Change color of dropdown links on hover */
+ .dropdown-content a:hover {
+ background-color: #f1f1f1
+ }
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+.show {
+ display: block;
+}
\ No newline at end of file

MODIFY
HiddenWallet/HiddenWallet.GUI/app/html/wallet-content.html
HiddenWallet/HiddenWallet.GUI/app/html/wallet-content.html
<hr />
<h4>
<span class="label label-info">From:</span>
- <span class="label" id="tumbling-from-wallet"></span>
- <span class="label label-info">Wallet</span>
- </h4>
- <h4>
+ <span class="dropdown">
+ <span id="choose-wallet-dropdown-active" onclick="chooseWalletDropdown()" class="label label-danger dropbtn"><span class="mdi mdi-arrow-down-drop-circle"></span> Select Wallet!</span>
+ <div id="choose-wallet-dropdown" class="dropdown-content">
+ <a id="wallet-dropdown-alice" onclick="chooseWalletDropdown('alice')" href="#">Alice</a>
+ <a id="wallet-dropdown-bob" onclick="chooseWalletDropdown('bob')" href="#">Bob</a>
+ </div>
+ </span>
<span class="label label-info">To:</span>
- <span class="label" id="tumbling-to-wallet"></span>
- <span class="label label-info">Wallet</span>
+ <span class="label label-danger" id="tumbling-to-wallet">?</span>
</h4>
<h4>
- <span class="label label-info">To:</span>
- <span class="label" id="tumbling-amount"></span>
+ <span class="label label-info">Amount:</span>
+ <input id="amount-input" onkeypress="document.getElementById('amount-input').stepUp(1); return false;" type="number" size="7" step="0.5" min="0.5" max="5"/>
<span class="label label-info">BTC</span>
</h4>
<hr />
<h4>
<span class="label label-info">Estimated Network Fees:</span>
<span class="label" id="tumbling-network-fees"></span>
- <span class="label label-info">BTC</span>
+ <span class="label label-info">%</span>
</h4>
- <button class="btn btn-sm btn-primary btn-inline" onclick="">Start Tumbling!</button>
+ <br />
+ <button id="broadcast-button" class="btn btn-lg btn-success btn-block" onclick="">
+ <span class="mdi mdi-tor"></span> Start Mixing
+ </button>
<hr />
</div>
\ No newline at end of file

MODIFY
HiddenWallet/HiddenWallet.GUI/app/js/default.js
HiddenWallet/HiddenWallet.GUI/app/js/default.js
@@ -75,3 +75,18 @@ document.body.addEventListener('contextmenu', (e) => {
node = node.parentNode;
}
});
+
+// Close the dropdown menu if the user clicks outside of it
+window.onclick = function (event) {
+ if (!event.target.matches('.dropbtn')) {
+
+ var dropdowns = document.getElementsByClassName("dropdown-content");
+ var i;
+ for (i = 0; i < dropdowns.length; i++) {
+ var openDropdown = dropdowns[i];
+ if (openDropdown.classList.contains('show')) {
+ openDropdown.classList.remove('show');
+ }
+ }
+ }
+}
\ No newline at end of file

MODIFY
HiddenWallet/HiddenWallet.GUI/app/js/wallet-phase.js
HiddenWallet/HiddenWallet.GUI/app/js/wallet-phase.js
function walletPhaseShow(tabItem = "") {
- document.getElementById("content").setAttribute("style", "max-height: 320px");
document.getElementById("hide-btn").hidden = false;
if (tabItem === "alice") {
+ document.getElementById("content").setAttribute("style", "max-height: 320px");
document.getElementById("tabs").innerHTML = document.getElementById("wallet-phase-tabs-frame").contentWindow.document.getElementById("alice-active").outerHTML;
storage.set('lastAccount', { lastAccount: 'alice' }, function (error) {
@@ -14,6 +14,7 @@ function walletPhaseShow(tabItem = "") {
walletShow('receive');
}
else if (tabItem === "bob") {
+ document.getElementById("content").setAttribute("style", "max-height: 320px");
document.getElementById("tabs").innerHTML = document.getElementById("wallet-phase-tabs-frame").contentWindow.document.getElementById("bob-active").outerHTML;
storage.set('lastAccount', { lastAccount: 'bob' }, function (error) {
if (error) throw error;
@@ -24,8 +25,11 @@ function walletPhaseShow(tabItem = "") {
walletShow('receive');
}
else if (tabItem === "mixer") {
+ document.getElementById("content").setAttribute("style", "max-height: 430");
document.getElementById("tabs").innerHTML = document.getElementById("wallet-phase-tabs-frame").contentWindow.document.getElementById("mixer-active").outerHTML;
- writeHint("TumbleBit cannot steal your coins, nor deanonymize you");
+ let hintTextArray = ["TumbleBit cannot steal your coins, nor deanonymize you", "Losing internet connection while mixing is dangerous if the Tumbler is malicous"];
+ let randomHint = hintTextArray[Math.floor(Math.random() * hintTextArray.length)];
+ writeHint(randomHint);
document.getElementById("menu").innerHTML = "";
document.getElementById("balances").innerHTML = "";
document.getElementById("before-menu-br").style.display = "block";
@@ -59,6 +63,31 @@ function walletShow(menuItem) {
updateWalletContent();
}
+
+/* When the user clicks on the button,
+toggle between hiding and showing the dropdown content */
+function chooseWalletDropdown(aliceBob = "") {
+ if (aliceBob === "") {
+ document.getElementById("choose-wallet-dropdown").classList.toggle("show");
+ }
+ else if (aliceBob === "alice") {
+ document.getElementById("choose-wallet-dropdown-active").innerHTML = "Alice";
+ document.getElementById("choose-wallet-dropdown-active").classList.remove("label-danger");
+ document.getElementById("choose-wallet-dropdown-active").classList.add("label-success");
+ document.getElementById("tumbling-to-wallet").innerHTML = "Bob";
+ document.getElementById("tumbling-to-wallet").classList.remove("label-danger");
+ document.getElementById("tumbling-to-wallet").classList.add("label-success");
+ }
+ else if (aliceBob === "bob") {
+ document.getElementById("choose-wallet-dropdown-active").innerHTML = "Bob";
+ document.getElementById("choose-wallet-dropdown-active").classList.remove("label-danger");
+ document.getElementById("choose-wallet-dropdown-active").classList.add("label-success");
+ document.getElementById("tumbling-to-wallet").innerHTML = "Alice";
+ document.getElementById("tumbling-to-wallet").classList.remove("label-danger");
+ document.getElementById("tumbling-to-wallet").classList.add("label-success");
+ }
+}
+
function mixerShow() {
document.getElementById("content").innerHTML = document.getElementById("wallet-content-frame").contentWindow.document.getElementById("mixer-content").outerHTML;
@@ -71,7 +100,7 @@ function mixerShow() {
document.getElementById("tumbler-fee").classList.add("label-warning");
document.getElementById("tumbling-time").innerText = "3";
document.getElementById("tumbling-time").classList.add("label-warning");
- document.getElementById("tumbling-network-fees").innerText = "0.001";
+ document.getElementById("tumbling-network-fees").innerText = "2.2";
document.getElementById("tumbling-network-fees").classList.add("label-warning");
}

Implement GUI until mixing starts