feature: Improvement of UoA is your choice (#691)

* Price equivalent improvements

* Move toggle price feature to right toolbar

* Fix wrong time text

* fix merging issue

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

Co-authored-by: Kim Neunert <k9ert@gmx.de>

Co-authored-by: Kim Neunert <k9ert@gmx.de>

src/cryptoadvance/specter/controller.py

@@ -249,6 +249,19 @@ def setprice():
     return {"success": False}
 
 
+@app.route("/toggleshowprice/", methods=["GET", "POST"])
+@login_required
+def toggleshowprice():
+    try:
+        app.specter.update_price_check_setting(
+            not app.specter.price_check, current_user
+        )
+        return {"success": True}
+    except Exception as e:
+        app.logger.warning("Failed to update price settings. Exception: {}".format(e))
+    return {"success": False}
+
+
 @app.route("/wallets/<wallet_alias>/decoderawtx/", methods=["GET", "POST"])
 @login_required
 def decoderawtx(wallet_alias):
@@ -259,7 +272,7 @@ def decoderawtx(wallet_alias):
             tx = wallet.rpc.gettransaction(txid)
             return {"success": True, "tx": tx, "rawtx": decoderawtransaction(tx["hex"])}
     except Exception as e:
-        app.logger.warning("Failed to update price settings. Exception: {}".format(e))
+        app.logger.warning("Failed to fetch transaction data. Exception: {}".format(e))
     return {"success": False}
 
 
@@ -438,12 +451,10 @@ def general_settings():
     explorer = app.specter.explorer
     loglevel = get_loglevel(app)
     unit = app.specter.unit
-    price_check = app.specter.price_check
     if request.method == "POST":
         action = request.form["action"]
         explorer = request.form["explorer"]
         unit = request.form["unit"]
-        price_check = request.form.get("pricecheck", "off") == "on"
         validate_merkleproof_bool = request.form.get("validatemerkleproof") == "on"
 
         if current_user.is_admin:
@@ -455,7 +466,6 @@ def general_settings():
 
             app.specter.update_explorer(explorer, current_user)
             app.specter.update_unit(unit, current_user)
-            app.specter.update_price_check_setting(price_check, current_user)
             app.specter.update_merkleproof_settings(
                 validate_bool=validate_merkleproof_bool
             )
@@ -535,7 +545,6 @@ def general_settings():
         loglevel=loglevel,
         validate_merkle_proofs=app.specter.config.get("validate_merkle_proofs") is True,
         unit=unit,
-        pricecheck=price_check,
         specter=app.specter,
         current_version=current_version,
         rand=rand,

src/cryptoadvance/specter/templates/base.jinja

@@ -30,10 +30,8 @@
 		<main><div><br><br></div>
 			{% if current_user.is_authenticated and not hwi_bridge %}
 				<div class="row" id="status-bar" style="border-radius: 0 0 0 15px; position: absolute; right: 0; color: #ddd; background-color: #323e50;">
+					{% include "components/price_bar.jinja" %}
 					{% include "components/tor_address.jinja" %}
-					{% if specter.price_check %}
-						{% include "components/price_bar.jinja" %}
-					{% endif %}
 					<a class="settings-bar-btn" href="{{ url_for('settings') }}">
 						<img src="{{ url_for('static', filename='img/settings-status-bar.svg') }}" style="width: 22px;"/>
 					</a>

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

@@ -21,7 +21,6 @@
 
     #tor-toggle-btn {
         cursor: pointer;
-        border-radius: 0 0 0 15px;
         position: relative;
         padding: 10px 40px 10px 20px;
     }
@@ -138,12 +137,12 @@
         }
         torToggleBtn.addEventListener("click", toggleTorPopup);
         let right = 0;
-        for(let i in document.getElementById('status-bar').children) {
-            if (i < document.getElementById('status-bar').children.length - 1) {
-                right += document.getElementById('status-bar').children[i].offsetWidth;
+        for(let el of document.getElementsByClassName('settings-bar-btn')) {
+            if (el.id != 'price-bar-btn') {
+                right += el.offsetWidth;
             }
         }
-        torDataContainer.style.right = (right + 22) + 'px';
+        torDataContainer.style.right = (right - 41) + 'px';
         window.addEventListener('click', function(e){   
             if (!torDataContainer.contains(e.target) && !torToggleBtn.contains(e.target)){
                 if (torDataContainer.style.display == 'block') {

src/cryptoadvance/specter/templates/settings/general_settings.jinja

@@ -53,13 +53,6 @@
 				<option value="sat" {% if unit=="sat" %} selected="selected"{% endif %}>sats</option>
 			</select>
 			<br><br>
-			<div class="row">
-				<span>Show Bitcoin price:</span>&nbsp;&nbsp;&nbsp;&nbsp;
-				<label class="switch">
-				<input type="checkbox" id="pricecheck" name="pricecheck" {% if pricecheck %}checked{% endif %}>
-				<span class="slider"></span>
-				</label>
-			</div><br>
 			Block explorer URL ({{ specter.chain }}):<br>
 			<input type="text" name="explorer" value="{{ explorer }}">
 			<div class="warning">

src/cryptoadvance/specter/templates/wallet/send/new/wallet_send.jinja

@@ -215,7 +215,7 @@
 			document.getElementById('converted_unit_amount_' + i).innerHTML = (isNaN(convertedAmount) ? '-' : convertedAmount);
 			document.getElementById('btc_amount_' + i).value = (units[i] == 'btc' ? amounts[i] : amounts[i] / 1e8);
 
-			if('{{ specter.check_price }}' == 'True'){
+			if('{{ specter.price_check }}' == 'True'){
 				let altRate = parseFloat('{{ specter.alt_rate }}');
 				let altSymbol = '{{ specter.alt_symbol }}';
 				let altAmount = parseFloat((altRate * parseFloat(document.getElementById('btc_amount_' + i).value)).toFixed(2))
@@ -452,6 +452,14 @@
 				console.log(psbt);
 				let fees = parseInt(psbt.fee * 1e8)
 				document.getElementById('calculated_tx_fee').innerText = `: ${fees} sats`;
+				if('{{ specter.price_check }}' == 'True'){
+					let altRate = parseFloat('{{ specter.alt_rate }}');
+					let altSymbol = '{{ specter.alt_symbol }}';
+					let altAmount = parseFloat((altRate * fees / 1e8).toFixed(2))
+					if (!isNaN(altAmount) && (altSymbol && altRate)) {
+						document.getElementById('calculated_tx_fee').innerText = `: ${fees} sats (${altAmount}${altSymbol})`;
+					}
+				}
 				return fees;
 			} catch {
 				document.getElementById('calculated_tx_fee').innerText = `: failed to calculate transaction fees`;

src/cryptoadvance/specter/templates/wallet/send/sign/wallet_send_sign_psbt.jinja

@@ -98,7 +98,7 @@
 				<h2 class="tx_details_header">Transaction Info</h2>
 				<p style="text-align: left; background-color: #131a24; padding: 10px; line-height: 2; border-radius: 15px;">
 					<b>Transaction id:</b> {{ psbt['tx']['txid'] }}<br>
-					<b>Total fee:</b> {{ psbt['fee'] | btc2sat }} sats<br>
+					<b>Total fee:</b> {{ psbt['fee'] | btc2sat }} sats {% if specter.price_check %}<span class="note">&nbsp;({{ psbt['fee'] | altunit }})</span>{% endif %}<br>
 					<b>Fee rate:</b>
 					{% if 'tx_full_size' in psbt %}
 						{{ (psbt['fee'] / psbt['tx_full_size']) | feerate }} sat/vbyte<br>
@@ -125,7 +125,7 @@
 						{% if 'label' in tx['details'][0] and tx['details'][0]['label'] != '' %}
 							<b>Label:</b> {{ tx['details'][0]['label'] }}<br>
 						{% endif %}
-						<b>Amount:</b> {{ psbt['inputs'][loop.index0]['witness_utxo']['amount'] }} BTC
+						<b>Amount:</b> {{ psbt['inputs'][loop.index0]['witness_utxo']['amount'] }} BTC {% if specter.price_check %}<span class="note">&nbsp;({{ psbt['inputs'][loop.index0]['witness_utxo']['amount'] | altunit }})</span>{% endif %}
 						{% endif %}
 					</p>
 				{% endfor %}
@@ -140,6 +140,7 @@
 							<b>Label:</b> {{ wallet.getlabel(output['scriptPubKey']['addresses'][0]) }}<br>
 						{% endif %}
 						<b>Amount:</b> {{ output['value'] }} BTC
+						<b>Amount:</b> {{ output['value'] }} BTC {% if specter.price_check %}<span class="note">&nbsp;({{ output['value'] | altunit }})</span>{% endif %}
 					</p>
 				{% endfor %}
 				Raw PSBT:<textarea id="raw-psbt" disabled style="background-color: #131a24;">{{ psbt['base64'] }}</textarea>