UIUX: HWI Bridge design improvement (#1015)

* HWI Bridge design improvement (round 1)

* Fix condition (testing forgot to revert)

* Design inprovements

* Update test_controller.py

* Update spec_empty_specter_home.js

* Update spec_empty_specter_home.js

* docs: update TOC

Co-authored-by: Kim Neunert <k9ert@gmx.de>
Co-authored-by: k9ert <k9ert@users.noreply.github.com>

DEVELOPMENT.md

@@ -4,6 +4,11 @@
 
 - [Development](#development)
   - [How to run the Application](#how-to-run-the-application)
+    - [Install dependencies:](#install-dependencies)
+      - [Ubuntu/Debian](#ubuntudebian)
+      - [macOS](#macos)
+      - [Windows](#windows)
+    - [Set up virtualenv](#set-up-virtualenv)
   - [How to run the tests](#how-to-run-the-tests)
   - [Code-Style](#code-style)
   - [Developing on tests](#developing-on-tests)

cypress/integration/spec_empty_specter_home.js

@@ -8,13 +8,16 @@ describe('Completely empty specter-home', () => {
     cy.visit('/')
     cy.contains('Welcome to Specter Desktop')
     cy.get('[href="/settings/"] > img').click()
-    cy.contains('Bitcoin Core settings - Specter Desktop custom')
+    cy.contains('Bitcoin JSON-RPC')
     cy.get('[href="/settings/general"]').click()
-    cy.contains('General settings - Specter Desktop custom')
+    cy.contains('Backup and Restore')
     cy.get('[href="/settings/auth"]').click()
-    cy.contains('Authentication settings - Specter Desktop custom')
+    cy.contains('Authentication:')
     cy.get('[href="/settings/hwi"]').click()
-    cy.contains('HWI Bridge settings - Specter Desktop custom')
+    cy.contains('Hardware Devices Bridge')
+    // Hidden in Cypress behind the price 
+    // cy.get('[href="/settings/tor"]').click()
+    // cy.contains('Tor configurations')
   })
 
   it('Creates a device in Specter', () => {

pyinstaller/electron/main.js

@@ -92,7 +92,7 @@ function createWindow (specterURL) {
 
   updateSpecterdStatus('Specter is running...')
 
-  mainWindow.loadURL(specterURL)
+  mainWindow.loadURL(specterURL + '?mode=remote')
   // Open the DevTools.
   // mainWindow.webContents.openDevTools()
 }

pyinstaller/electron/settings.html

@@ -10,48 +10,51 @@
             <h1 style="margin-top: 20px;">Preferences</h1>
             <form action="" class="card">
                 <div>
-                    <h2>Specter Server</h2>
+                    <h2>Do you want to connect to a remote Specter?</h2>
                     <div style="margin: 10px;">
-                        Run Specter:<br>
-                        <label><input type="radio" class="inline" name="mode" value="specterd" onclick="toggleHWIBridgeView(false)" checked>Run local Specter server</label><br>
-                        <label><input type="radio" class="inline" id="hwibridge-mode-active" name="mode" value="hwibridge" onclick="toggleHWIBridgeView(true);">Use a remote Specter server</label><br>
+                        <label><input type="radio" class="inline" name="mode" value="specterd" onclick="toggleHWIBridgeView(false)" checked>No, run Specter locally</label><br>
+                        <label><input type="radio" class="inline" id="hwibridge-mode-active" name="mode" value="hwibridge" onclick="toggleHWIBridgeView(true);">Yes, I run Specter remotely</label><br>
                         <div id="hwibridge-mode-settings"><br>
-                            <input id="specter-url" style="margin-top: 10px;" type="url" placeholder="Please enter the remote Specter URL" />
+                            <span style="font-size: 0.95em;">Paste the URL you use to access your remote Specter:</span>
+                            <input id="specter-url" style="margin-top: 10px;" type="url" placeholder="http://" />
                             <br>
                             <p style="margin-top: 20px;">
                                 <img style="width: 25px; margin-right: 7px; vertical-align: bottom;" src="assets/tor.svg"/><span style="vertical-align: bottom; margin-right: 10px;">Connect over Tor: </span><label class="switch">
-                                    <input type="checkbox" id="tor-checkbox">
+                                    <input type="checkbox" id="tor-checkbox" onchange="toggleTorProxy(this.checked)">
                                     <span class="slider"></span>
                                 </label>
                             </p>
-                            <input id="proxy-url" type="url" placeholder="Proxy URL" />
+                            <input id="proxy-url" type="url" class="hidden" placeholder="Proxy URL" />
                         </div>
                     </div>
                     <br>
-                    <hr>
-                    <br>
-                    <h2 style="float: left;">Specter daemon configurations</h2>
-                    <br>
-                    <div style="margin: 10px;">
-                        <img onclick="this.style.display = 'none'; document.getElementById('specterd-version').disabled=false; document.getElementById('download-github-version').style.display='block'"
-                        style="width: 25px; float: right; margin-right: 8px;  margin-top: 8px; cursor: pointer;" title="Edit version" src="assets/edit_icon.svg"/>
-                        <p>Specterd Version:<input id="specterd-version" style="margin-top: 10px;" disabled type="text" placeholder="The specterd version to install (leave blank to skip installation)" /></p>
-                        <span id="download-github-version" class="hidden">
-                            Re-download from GitHub: <input style="vertical-align: sub;" class="checkbox" type="checkbox" id="download-github-version-checkbox">
-                        </span>
-                        <img onclick="this.style.display = 'none'; document.getElementById('specterd-hash').disabled=false"
-                        style="width: 25px; float: right; margin-right: 8px;  margin-top: 8px; cursor: pointer;" title="Edit specterd hash" src="assets/edit_icon.svg"/>
-                        <p>Specterd File Hash: <input id="specterd-hash" style="margin-top: 10px;" disabled type="text" placeholder="The specterd expected file hash (leave blank to skip check)" /></p>
-                        <p>Specterd CLI args: <input id="specterd-cli-args" style="margin-top: 10px;" type="text" placeholder="example: --tor --port=25441" /></p>
-                        <p>Use a custom specterd file: <input type="file" id="specterd-file" class="inputfile"/>
-					    <label for="specterd-file" class="btn" style="display: inline-block; margin-left: 15px; width: 180px;">Choose file</label></p>
-                        <span class="note">You can download the specterd file from the github releases page:
-                            <a style="color: white;" target="_blank" href="https://github.com/cryptoadvance/specter-desktop/releases">https://github.com/cryptoadvance/specter-desktop/releases</a></span>
+                    <span id="toggle_advanced" style="cursor: pointer;" onclick="toggleAdvanced()">Advanced &#9654;</span>
+                    <div id="advanced_settings" class="hidden">
+                        <hr>
+                        <br>
+                        <h2 style="float: left;">Specter daemon configurations</h2>
+                        <br>
+                        <div style="margin: 10px;">
+                            <img onclick="this.style.display = 'none'; document.getElementById('specterd-version').disabled=false; document.getElementById('download-github-version').style.display='block'"
+                            style="width: 25px; float: right; margin-right: 8px;  margin-top: 8px; cursor: pointer;" title="Edit version" src="assets/edit_icon.svg"/>
+                            <p>Specterd Version:<input id="specterd-version" style="margin-top: 10px;" disabled type="text" placeholder="The specterd version to install (leave blank to skip installation)" /></p>
+                            <span id="download-github-version" class="hidden">
+                                Re-download from GitHub: <input style="vertical-align: sub;" class="checkbox" type="checkbox" id="download-github-version-checkbox">
+                            </span>
+                            <img onclick="this.style.display = 'none'; document.getElementById('specterd-hash').disabled=false"
+                            style="width: 25px; float: right; margin-right: 8px;  margin-top: 8px; cursor: pointer;" title="Edit specterd hash" src="assets/edit_icon.svg"/>
+                            <p>Specterd File Hash: <input id="specterd-hash" style="margin-top: 10px;" disabled type="text" placeholder="The specterd expected file hash (leave blank to skip check)" /></p>
+                            <p>Specterd CLI args: <input id="specterd-cli-args" style="margin-top: 10px;" type="text" placeholder="example: --tor --port=25441" /></p>
+                            <p>Use a custom specterd file: <input type="file" id="specterd-file" class="inputfile"/>
+                            <label for="specterd-file" class="btn" style="display: inline-block; margin-left: 15px; width: 180px;">Choose file</label></p>
+                            <span class="note">You can download the specterd file from the github releases page:
+                                <a style="color: white;" target="_blank" href="https://github.com/cryptoadvance/specter-desktop/releases">https://github.com/cryptoadvance/specter-desktop/releases</a></span>
+                        </div>
                     </div>
                 </div><br>
                 <div class="row flex-center">
-                    <button type="button" id="save-btn" class="btn" onclick="signalSavePreferences()" style="margin: 5px;">Save</button>
                     <button type="button" id="cancel-btn" class="btn" onclick="window.close()" style="margin: 5px;">Cancel</button>
+                    <button type="button" id="save-btn" class="btn action" onclick="signalSavePreferences()" style="margin: 5px;">Save</button>
                 </div>
             </form>
         </div>
@@ -66,6 +69,22 @@ <h2 style="float: left;">Specter daemon configurations</h2>
             const appSettingsPath = helpers.appSettingsPath
             const specterdDirPath = helpers.specterdDirPath
 
+
+            function toggleAdvanced() {
+                let advancedButton = document.getElementById('toggle_advanced');
+                let advancedSettigns = document.getElementById('advanced_settings');
+                if (advancedSettigns.style.display === 'block') {
+                    advancedSettigns.style.display = 'none';
+                    advancedButton.innerHTML = 'Advanced &#9654;';
+                    if (isCoinSelectionActive()) {
+                        toggleExpand();
+                    }
+                } else {
+                    advancedSettigns.style.display = 'block';
+                    advancedButton.innerHTML = 'Advanced &#9660;';
+                }
+            }
+
             function toggleHWIBridgeView(isActive) {
                 document.getElementById('hwibridge-mode-active').checked = isActive
                 document.getElementById('hwibridge-mode-settings').style.display = isActive ? 'block' : 'none'
@@ -122,6 +141,14 @@ <h2 style="float: left;">Specter daemon configurations</h2>
                 });
             }
 
+            function toggleTorProxy(torOn) {
+                if (torOn) {
+                    document.getElementById('proxy-url').classList.remove('hidden')
+                } else {
+                    document.getElementById('proxy-url').classList.add('hidden')
+                }
+            }
+
             document.addEventListener("DOMContentLoaded", function() {
                 let appSettings = getAppSettings()
                 let hwiBridgeMode = appSettings.mode == 'hwibridge'
@@ -130,6 +157,7 @@ <h2 style="float: left;">Specter daemon configurations</h2>
                 }
                 document.getElementById('proxy-url').value = appSettings.proxyURL
                 document.getElementById('tor-checkbox').checked = appSettings.tor
+                toggleTorProxy(appSettings.tor)
                 document.getElementById('specterd-version').value = appSettings.specterdVersion
                 document.getElementById('specterd-hash').value = appSettings.specterdHash
                 document.getElementById('specterd-cli-args').value = appSettings.specterdCLIArgs

pyinstaller/electron/styles.css

@@ -584,6 +584,7 @@ textarea{
 .btn.radio:hover{
     background: #304052;
 }
+
 input[type="radio"].hidden{
     position: absolute;
     top: -100px;

src/cryptoadvance/specter/server_endpoints/controller.py

@@ -112,6 +112,9 @@ def inject_debug():
 @app.route("/")
 @login_required
 def index():
+    if request.args.get("mode"):
+        if request.args.get("mode") == "remote":
+            pass
     notify_upgrade(app, flash)
     if len(app.specter.wallet_manager.wallets) > 0:
         if len(app.specter.wallet_manager.wallets) > 1:

src/cryptoadvance/specter/templates/base.jinja

@@ -78,7 +78,22 @@
 					<br><br>
 					{% else %}
 					<h2 style="font-size: 1.6em;">Getting Started</h2><br>
-					<table>
+					{# {% if ('://localhost:' not in url_for('index', _external=True) and '://127.0.0.1:' not in url_for('index', _external=True)) and specter.hwi_bridge_url != "http://127.0.0.1:25441/hwi/api/" %} #}
+						<div style="margin: auto; display: block;">
+							<div class="card" style="margin: auto;padding: 5px 10px 15px; width: 90%;">
+								<div class="row">
+									<img src="{{ url_for('static', filename='img/warning_sign.svg') }}" style="width: 20px;"/>
+									<p style="color: #FF9A00; font-size: 1.1em; margin-left: 10px;">Using Specter from a remote machine?</p>
+								</div>
+								<p style="margin-left: 30px; margin-top: -10px; margin-right: 20px; text-align: left;">If you run Specter on a remote machine, like Umbrel or a myNode, you need to update settings to connect hardware wallets via USB.</p>
+								<a href="{{ url_for('settings_endpoint.hwi') }}" style="color: #fff; text-decoration: underline; cursor: pointer;">
+									<h4>Update your settings</h4>
+								</a>
+							</div>
+							<br>
+						</div>
+					{# {% endif %} #}
+					<table style="width: 90%; margin: auto;">
 						<tbody>
 							<tr>
 								<td>

src/cryptoadvance/specter/templates/components/price_bar.jinja

@@ -25,7 +25,7 @@
         }
     }
 </style>
-<a id="price-bar-btn" type="button" style="cursor: pointer;" class="settings-bar-btn left-toolbar" onclick="showPageOverlay('price-popup')">
+<a id="price-bar-btn" type="button" style="cursor: pointer; background: #4a90e2; color: #fff;" class="settings-bar-btn left-toolbar" onclick="showPageOverlay('price-popup')">
     {% if specter.price_check %}
         <span>{{ 1 | altunit}}</span>
     {% else %}

src/cryptoadvance/specter/templates/device/new_device_manual.jinja

@@ -18,7 +18,7 @@
 				</div>
 				<br>
 				{% include "device/components/device_type.jinja" %}
-				<p class="warning hidden" id="type_reminder">&#9432;<br>Please make sure to choose the device type before continuing</p>
+				<p class="warning hidden" id="type_reminder"><img src="{{ url_for('static', filename='img/info_sign.svg') }}" style="width: 20px;"/><br>Please make sure to choose the device type before continuing</p>
 				<div id="toggle_passphrase_container" class="hidden">
 					<p>Device Management:</p>
 					<div class="row">

src/cryptoadvance/specter/templates/includes/hwi/components/pin.jinja

@@ -22,7 +22,7 @@
             }
             console.log(result);
             if(!overlayIsActive()){
-                showNotification("HWI is ready again", 10000);
+                // showNotification("HWI is ready again", 10000);
                 // no need to proceed at all
                 return null;
             }
@@ -91,7 +91,7 @@
         }
         console.log(result);
         if(!overlayIsActive()){
-            showNotification("HWI is ready again", 10000);
+            // showNotification("HWI is ready again", 10000);
             // no need to proceed at all
             return null;
         }

src/cryptoadvance/specter/templates/includes/hwi/components/select_device.jinja

@@ -108,7 +108,7 @@
             return null;
         }
         if(!overlayIsActive()){
-            showNotification("HWI is ready again", 10000);
+            // showNotification("HWI is ready again", 10000);
             // no need to proceed at all
             return null;
         }

src/cryptoadvance/specter/templates/includes/hwi/hwi.jinja

@@ -15,31 +15,14 @@
     <p id="bitbox02-pairing-code" style="margin: auto;"></p>
     <img src="{{ url_for('static', filename='img/loader_boxes.svg') }}">
     <div class="flex-center hidden" id="hwi_progress_note" style="cursor: pointer;">
-        Running Specter on a remote machine? &#9654
-    </div>
-    <div id="hwi_progress_note_expand" class="hidden">
-        <br>
-        <a target="_blank" style="color: #fff;" href="https://github.com/cryptoadvance/specter-desktop/blob/master/docs/hwibridge.md">Follow this guide</a> to learn more about using hardware wallets with a remote Specter.
+        If your device does not show up, ensure the Specter USB settings are correctly configured.<br><br>
+        <a href="{{ url_for('settings_endpoint.hwi') }}" style="color: #fff; text-decoration: underline; cursor: pointer;">
+            View USB settings
+        </a>
     </div>
     <br>
 </div>
 
-<script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", function(){
-        let note = document.getElementById('hwi_progress_note');
-        note.addEventListener('click', (e) => {
-            let noteDetails = document.getElementById('hwi_progress_note_expand');
-            if (noteDetails.style.display == 'block') {
-                noteDetails.style.display = 'none';
-                note.innerHTML = note.innerText.substring(0, note.innerText.length - 1) + '&#9654;';
-            } else {
-                noteDetails.style.display = 'block';
-                note.innerHTML = note.innerText.substring(0, note.innerText.length - 1) + '&#9660;';
-            }
-        })
-    });
-</script>
-
 <script type="text/javascript">
     let hwiURL = '/hwi/api/';
     if (
@@ -103,7 +86,7 @@
                 // check that we still need to do it
                 // just before the request
                 if(!overlayIsActive()){
-                    showNotification("HWI is ready again", 10000);
+                    // showNotification("HWI is ready again", 10000);
                     return null;
                 }
                 console.log("Retrying enumerate...");
@@ -139,7 +122,7 @@
         console.log(result);
         document.getElementById('bitbox02-pairing-code').innerHTML = "";
         if(!overlayIsActive() && devicePath == null){
-            showNotification("HWI is ready again", 10000);
+            // showNotification("HWI is ready again", 10000);
             // no need to proceed at all
             return null;
         }
@@ -161,7 +144,7 @@
             return null;
         }
         if(!overlayIsActive()){
-            showNotification("HWI is ready again", 3000);
+            // showNotification("HWI is ready again", 3000);
             // no need to proceed at all
             return null;
         }
@@ -181,7 +164,7 @@
             return null;
         }
         if(!overlayIsActive()){
-            showNotification("HWI is ready again", 3000);
+            // showNotification("HWI is ready again", 3000);
             // no need to proceed at all
             return null;
         }