UIUX: Better balance display (#1841)

* Better alignment and introduction of spaces and colours for BTC amounts.

Co-authored-by: Kim Neunert <[email protected]>
Co-authored-by: moneymanolis <[email protected]>

Author: 3 people

cypress.json

@@ -9,6 +9,7 @@
       "spec_fees.js",
       "spec_rescan.js",
       "spec_qr_signing.js",
+      "spec_balances_amounts.js",
       "spec_wallet_send.js",
       "spec_wallet_utxo.js",
       "spec_plugins.js",

cypress/integration/spec_balances_amounts.js

@@ -0,0 +1,115 @@
+// 
+describe('Test the rendering of balances and amounts', () => {
+    before(() => {
+        Cypress.config('includeShadowDom', true)
+        cy.visit('/')
+    })
+
+    // Keeps the session cookie alive, Cypress by default clears all cookies before each test
+    beforeEach(() => {
+        cy.viewport(1200,660)
+        Cypress.Cookies.preserveOnce('session')
+    })
+
+    it('Total balance of 20 BTC', () => {
+        /* This is how the DOM looks like
+        <th id="fullbalance_amount" class="right-align">
+            20.0
+            <span class="unselectable transparent-text">0</span>
+            <span class="thousand-digits-in-btc-amount">
+                <span class="unselectable transparent-text">0</span>
+                <span class="unselectable transparent-text">0</span>
+                <span class="unselectable transparent-text">0</span>
+            </span>
+            <span class="last-digits-in-btc-amount">
+                <span class="unselectable transparent-text">0</span>
+                <span class="unselectable transparent-text">0</span>
+                <span class="unselectable transparent-text">0</span>
+            </span>
+        </th>
+        */
+        cy.selectWallet('Ghost wallet')
+        cy.get('#fullbalance_amount').should('have.text', '20.00000000') // should('have.text') returns ALL textContents (descendants and unvisible text)
+        cy.get('#fullbalance_amount').find('span').first().should('have.text', '0').and('not.be.visible')
+        cy.get('#fullbalance_amount').find('.thousand-digits-in-btc-amount').children().each((element) => {
+            cy.wrap(element).should('have.text', '0') 
+            cy.wrap(element).should('not.be.visible') 
+        });
+        cy.get('#fullbalance_amount').find('.last-digits-in-btc-amount').children().each((element) => {
+            cy.wrap(element).should('have.text', '0') 
+            cy.wrap(element).should('not.be.visible') 
+        });
+    })
+
+    it('Unconfirmed balance of 0.05 BTC', () => {
+        /* This is how the DOM looks like
+        <th id="unconfirmed_amount" class="right-align">
+            0.05
+            <span class="thousand-digits-in-btc-amount">
+                <span class="unselectable transparent-text">0</span>
+                <span class="unselectable transparent-text">0</span>
+                <span class="unselectable transparent-text">0</span>
+            </span>
+            <span class="last-digits-in-btc-amount">
+                <span class="unselectable transparent-text">0</span>
+                <span class="unselectable transparent-text">0</span>
+                <span class="unselectable transparent-text">0</span>
+            </span>
+        </th>
+        */
+        // We get 5 mio. sats from a funding wallet
+        // TODO: If this funding wallet is used more, move it to a seperate spec file
+        cy.addHotDevice('Satoshis hot keys','bitcoin')
+        cy.addWallet('Funding wallet', 'segwit', 'funded', 'btc', 'singlesig', 'Satoshis hot keys')
+        cy.selectWallet('Funding wallet')
+        cy.get('#btn_send').click()
+        cy.get('#recipient_0').find('#address').invoke('val', 'bcrt1qvtdx75y4554ngrq6aff3xdqnvjhmct5wck95qs') 
+        cy.get('#recipient_0').find('#amount').type(0.05, { force: true })
+        cy.get('#toggle_advanced').click()
+        cy.get('.fee_container').find('#fee_option_manual').click()
+        cy.get('#fee_manual').find('#fee_rate').clear( { force: true })
+        cy.get('#fee_manual').find('#fee_rate').type(5, { force: true }) // Should be a fee of 709 sats.
+        cy.get('#create_psbt_btn').click()
+        cy.get('body').contains("Paste signed transaction")
+        cy.get('#satoshis_hot_keys_tx_sign_btn').click()
+        cy.get('#satoshis_hot_keys_hot_sign_btn').click()
+        cy.get('#hot_enter_passphrase__submit').click()
+        cy.get('#broadcast_local_btn').click()
+        cy.reload()
+        cy.selectWallet('Ghost wallet')
+        cy.get('#unconfirmed_amount').should('have.text', '0.05000000')
+        cy.get('#unconfirmed_amount').find('.thousand-digits-in-btc-amount').children().each((element) => {
+            cy.wrap(element).should('have.text', '0') 
+            cy.wrap(element).should('not.be.visible') 
+        });
+        cy.get('#unconfirmed_amount').find('.last-digits-in-btc-amount').children().each((element) => {
+            cy.wrap(element).should('have.text', '0') 
+            cy.wrap(element).should('not.be.visible') 
+        });
+    })
+
+    it('Total balance with all digits', () => {
+        /* This is how the DOM looks like
+        <th id="fullbalance_amount" class="right-align">
+            19.94
+            <span class="thousand-digits-in-btc-amount">999</span>
+            <span class="last-digits-in-btc-amount">291</span>
+        </th>
+        */
+        // Let's use the funding wallet
+        // Works as long as the fee was 709 and the original balance of the funding wallet was 20 BTC
+        cy.selectWallet('Funding wallet')
+        cy.get('#fullbalance_amount').should('have.text', '19.94999291')
+        cy.get('#fullbalance_amount').find('.thousand-digits-in-btc-amount').should('have.text', '999') 
+        cy.get('#fullbalance_amount').find('.thousand-digits-in-btc-amount').should('have.css', 'color','rgb(145, 145, 145)') 
+        cy.get('#fullbalance_amount').find('.last-digits-in-btc-amount').should('have.text', '291') 
+        cy.get('#fullbalance_amount').find('.last-digits-in-btc-amount').should('have.css', 'color','rgb(121, 121, 121)') 
+        cy.get('#fullbalance_amount').children().each((element) => {
+            cy.wrap(element).should('be.visible')
+            cy.log(element)
+        });
+    })
+
+    // TODO: Test (new) amount display once implemented, e.g. in sending dialogue, could probably be done in one of the tests above.
+
+})

cypress/support/commands.js

@@ -216,7 +216,7 @@ Cypress.Commands.add("deleteWallet", (name) => {
 Cypress.Commands.add("selectWallet", (name) => { 
   cy.get('body').then(($body) => {
     if ($body.text().includes(name)) {
-        cy.contains(name).click()
+        cy.contains(name).click( {force: true} )
     } 
   })
 })
@@ -225,8 +225,8 @@ Cypress.Commands.add("mine2wallet", (chain) => {
   // Fund it and check the balance
   // Only works if a wallet is selected, use addHotWallet / selectWallet commands before if needed
   cy.get('#btn_transactions').click()
-  cy.get('#fullbalance_amount', { timeout: Cypress.env("broadcast_timeout") }).then(($span) => {
-      const oldBalance = parseFloat($span.text())
+  cy.get('#fullbalance_amount', { timeout: Cypress.env("broadcast_timeout") }).then(($header) => {
+      const oldBalance = parseFloat($header.text())
       if (chain=="elm" || chain=="elements") {
         cy.task("elm:mine")
       } else if (chain=="btc" || chain=="bitcoin") {
@@ -235,8 +235,8 @@ Cypress.Commands.add("mine2wallet", (chain) => {
         throw new Error("Unknown chain: " + chain)
       }
       cy.waitUntil( () => cy.reload().get('#fullbalance_amount', { timeout: 3000 }) 
-        .then(($span) => {
-          const n = parseFloat($span.text())
+        .then(($header) => {
+          const n = parseFloat($header.text())
           return n > oldBalance
         })
       , {

src/cryptoadvance/specter/cli/cli_noded.py

@@ -8,10 +8,12 @@
 import time
 from pathlib import Path
 from threading import Event
+from xmlrpc.client import Boolean
 
 import click
 import psutil
 from flask import Config
+from requests.exceptions import ConnectionError
 
 from ..config import DEFAULT_CONFIG
 from ..process_controller.elementsd_controller import ElementsPlainController
@@ -352,15 +354,15 @@ def cleanup():
 
     if node_impl == "elements":
         prepare_elements_default_wallet(my_node)
-
-    if mining:
-        miner_loop(
-            node_impl,
-            my_node,
-            config_obj["SPECTER_DATA_FOLDER"],
-            mining_every_x_seconds,
-            echo,
-        )
+    # Mining/NOP loop (necessary to keep the Python process running)
+    endless_loop(
+        node_impl,
+        my_node,
+        mining,
+        config_obj["SPECTER_DATA_FOLDER"],
+        mining_every_x_seconds,
+        echo,
+    )
 
 
 def prepare_elements_default_wallet(my_node):
@@ -386,61 +388,75 @@ def prepare_elements_default_wallet(my_node):
         rpc.generatetoaddress(101, unconfidential)
 
 
-def miner_loop(node_impl, my_node, data_folder, mining_every_x_seconds, echo):
-    "An endless loop mining bitcoin"
-
-    echo(
-        "Now, mining a block every %f seconds, avoid it via --no-mining"
-        % mining_every_x_seconds
-    )
-    mine_2_specter_wallets(node_impl, my_node, data_folder, echo)
+def endless_loop(
+    node_impl, my_node, mining: Boolean, data_folder, mining_every_x_seconds, echo
+):
+    """This loop can enable continuous mining"""
 
-    # make them spendable
-    my_node.mine(block_count=100)
-    echo(
-        f"height: {my_node.rpcconn.get_rpc().getblockchaininfo()['blocks']} | ",
-        nl=False,
-    )
+    # To stop the Python process
     exit = Event()
 
-    def exit_now(signo, _frame):
+    def exit_now(signum, frame):
+        echo(f"Signal {signum} received. Terminating the Python process. Bye, bye!")
         exit.set()
 
-    for sig in ("HUP", "INT"):
-        signal.signal(getattr(signal, "SIG" + sig), exit_now)
+    signal.signal(signal.SIGINT, exit_now)
+    signal.signal(signal.SIGHUP, exit_now)
+    signal.signal(signal.SIGTERM, exit_now)
+    # SIGKILL cannot be caught
+
+    if mining:
+        echo(
+            "Now, mining a block every %f seconds, avoid it via --no-mining"
+            % mining_every_x_seconds
+        )
+        mine_2_specter_wallets(node_impl, my_node, data_folder, echo)
+        # make them spendable
+        my_node.mine(block_count=100)
+        echo(
+            f"height: {my_node.rpcconn.get_rpc().getblockchaininfo()['blocks']} | ",
+            nl=False,
+        )
+    else:
+        echo("Press Ctrl-C to abort and stop the node")
+
     prevent_mining_file = Path("prevent_mining")
     i = 0
-    while True:
+    while not exit.is_set():
         try:
             current_height = my_node.rpcconn.get_rpc().getblockchaininfo()["blocks"]
             exit.wait(mining_every_x_seconds)
-            if not prevent_mining_file.is_file():
+            # Having a prevent_mining_file overrides the mining cli option
+            if mining and not prevent_mining_file.is_file():
                 my_node.mine()
-            else:
+                echo("%i" % (i % 10), prefix=False, nl=False)
+                if i % 10 == 9:
+                    echo(" ", prefix=False, nl=False)
+                i += 1
+                if i >= 50:
+                    i = 0
+                    echo("", prefix=False)
+                    echo(
+                        f"height: {current_height} | ",
+                        nl=False,
+                    )
+            elif mining:
                 echo("X", prefix=False, nl=False)
                 continue
 
-            echo("%i" % (i % 10), prefix=False, nl=False)
-            if i % 10 == 9:
-                echo(" ", prefix=False, nl=False)
-            i += 1
-            if i >= 50:
-                i = 0
-                echo("", prefix=False)
-                echo(
-                    f"height: {current_height} | ",
-                    nl=False,
-                )
-
+        except ConnectionError as nce:
+            # This terminates the Python processes if the bitcoind / elementsd (child) processes are somehow terminated
+            echo("Exiting endless loop due to lost RPC connection.")
+            break
         except Exception as e:
             logger.debug(
-                f"Caught {e}, Couldn't mine, assume SIGTERM occured => exiting!"
+                f"Caught {e.__module__}, Couldn't mine, assume SIGTERM occured => exiting!"
             )
-            echo(f"THE_END(@height:{current_height})")
-            if prevent_mining_file.is_file():
-                echo("Deleting file prevent_mining")
-                prevent_mining_file.unlink()
             break
+    if prevent_mining_file.is_file():
+        echo("Deleting file prevent_mining")
+        prevent_mining_file.unlink()
+    echo(f"THE_END(@height:{current_height})")
 
 
 def mine_2_specter_wallets(node_impl, my_node, data_folder, echo):
@@ -451,6 +467,7 @@ def mine_2_specter_wallets(node_impl, my_node, data_folder, echo):
     # Using the dict key, not the wallet name
     exception = "fresh_wallet"
     try:
+        logger.debug(f"Funding wallets in {data_folder}/wallets")
         for address in fetch_wallet_addresses_for_mining(
             node_impl, data_folder, exception
         ):

src/cryptoadvance/specter/process_controller/node_controller.py

@@ -560,8 +560,6 @@ def fetch_wallet_addresses_for_mining(node_impl, data_folder, exception=None):
     Parses all the wallet jsons in the folder (default ~/.specter/wallets/regtest) and returns an array with the addresses.
     Pass a wallet name via the exception argument so that this wallet's addresses are not included.
     """
-    print(f"{data_folder}/wallets")
-    print(os.listdir(f"{data_folder}"))
     addresses_all = []
     for folder in [
         folder for folder in os.listdir(data_folder) if folder.startswith("wallets")

src/cryptoadvance/specter/server_endpoints/filters.py

@@ -3,6 +3,7 @@
 from flask import Blueprint
 from jinja2 import pass_context
 from ..helpers import to_ascii20
+from ..util.common import format_btc_amount_as_sats, format_btc_amount
 
 filters_bp = Blueprint("filters", __name__)
 
@@ -27,6 +28,43 @@ def timedatetime(context, s):
     return format(datetime.fromtimestamp(s), "%d.%m.%Y %H:%M")
 
 
+@pass_context
+@filters_bp.app_template_filter("average_of_attribute")
+def average_of_attribute(context, values, attribute):
+    dicts = [
+        getattr(value, attribute)
+        for value in values
+        if getattr(value, attribute) is not None
+    ]
+    return sum(dicts) / len(dicts) if dicts else None
+
+
+@pass_context
+@filters_bp.app_template_filter("btcunitamount_fixed_decimals")
+def btcunitamount_fixed_decimals(
+    context,
+    value,
+    maximum_digits_to_strip=7,
+    minimum_digits_to_strip=6,
+    enable_digit_formatting=True,
+):
+    if app.specter.hide_sensitive_info:
+        return "#########"
+    if value is None:
+        return "Unknown"
+    if value < 0 and app.specter.is_liquid:
+        return "Confidential"
+    if app.specter.unit == "sat":
+        return format_btc_amount_as_sats(value)
+
+    return format_btc_amount(
+        value,
+        maximum_digits_to_strip=maximum_digits_to_strip,
+        minimum_digits_to_strip=minimum_digits_to_strip,
+        enable_digit_formatting=enable_digit_formatting,
+    )
+
+
 @pass_context
 @filters_bp.app_template_filter("btcamount")
 def btcamount(context, value):