qml: implement RbF bump methods Decrease payment/Preserve payment

extend FormattedAmount to wrap alt to next line, or show as empty when invalid

electrum/gui/qml/components/RbfBumpFeeDialog.qml

@@ -30,8 +30,7 @@ ElDialog {
     }
 
     ColumnLayout {
-        width: parent.width
-        height: parent.height
+        anchors.fill: parent
         spacing: 0
 
         GridLayout {
@@ -41,20 +40,52 @@ ElDialog {
             columns: 2
 
             Label {
-                text: qsTr('Old fee')
+                Layout.columnSpan: 2
+                Layout.fillWidth: true
+                text: qsTr('Increase your transaction\'s fee to improve its position in the mempool')
+                wrapMode: Text.Wrap
+            }
+
+            Label {
+                Layout.preferredWidth: 1
+                Layout.fillWidth: true
+                text: qsTr('Method')
                 color: Material.accentColor
             }
 
             RowLayout {
-                Label {
-                    id: oldfee
-                    text: Config.formatSats(rbffeebumper.oldfee)
+                Layout.preferredWidth: 1
+                Layout.fillWidth: true
+                ElComboBox {
+                    textRole: 'text'
+                    valueRole: 'value'
+
+                    model: [
+                        { text: qsTr('Preserve payment'), value: 'preserve_payment' },
+                        { text: qsTr('Decrease payment'), value: 'decrease_payment' }
+                    ]
+                    onCurrentValueChanged: {
+                        if (activeFocus)
+                            rbffeebumper.bumpMethod = currentValue
+                    }
+                    Component.onCompleted: {
+                        currentIndex = indexOfValue(rbffeebumper.bumpMethod)
+                    }
                 }
+                Item { Layout.fillWidth: true;  Layout.preferredHeight: 1 }
+            }
 
-                Label {
-                    text: Config.baseUnit
-                    color: Material.accentColor
-                }
+            Label {
+                Layout.preferredWidth: 1
+                Layout.fillWidth: true
+                text: qsTr('Old fee')
+                color: Material.accentColor
+            }
+
+            FormattedAmount {
+                Layout.preferredWidth: 1
+                Layout.fillWidth: true
+                amount: rbffeebumper.oldfee
             }
 
             Label {
@@ -66,6 +97,7 @@ ElDialog {
                 Label {
                     id: oldfeeRate
                     text: rbffeebumper.oldfeeRate
+                    font.family: FixedFont
                 }
 
                 Label {
@@ -79,17 +111,9 @@ ElDialog {
                 color: Material.accentColor
             }
 
-            RowLayout {
-                Label {
-                    id: fee
-                    text: rbffeebumper.valid ? Config.formatSats(rbffeebumper.fee) : ''
-                }
-
-                Label {
-                    visible: rbffeebumper.valid
-                    text: Config.baseUnit
-                    color: Material.accentColor
-                }
+            FormattedAmount {
+                amount: rbffeebumper.fee
+                valid: rbffeebumper.valid
             }
 
             Label {
@@ -101,6 +125,7 @@ ElDialog {
                 Label {
                     id: feeRate
                     text: rbffeebumper.valid ? rbffeebumper.feeRate : ''
+                    font.family: FixedFont
                 }
 
                 Label {
@@ -120,31 +145,36 @@ ElDialog {
                 text: rbffeebumper.target
             }
 
-            Slider {
-                id: feeslider
-                leftPadding: constants.paddingMedium
-                snapMode: Slider.SnapOnRelease
-                stepSize: 1
-                from: 0
-                to: rbffeebumper.sliderSteps
-                onValueChanged: {
-                    if (activeFocus)
-                        rbffeebumper.sliderPos = value
-                }
-                Component.onCompleted: {
-                    value = rbffeebumper.sliderPos
-                }
-                Connections {
-                    target: rbffeebumper
-                    function onSliderPosChanged() {
-                        feeslider.value = rbffeebumper.sliderPos
+            RowLayout {
+                Layout.columnSpan: 2
+                Layout.fillWidth: true
+                Slider {
+                    id: feeslider
+                    Layout.fillWidth: true
+                    leftPadding: constants.paddingMedium
+                    snapMode: Slider.SnapOnRelease
+                    stepSize: 1
+                    from: 0
+                    to: rbffeebumper.sliderSteps
+                    onValueChanged: {
+                        if (activeFocus)
+                            rbffeebumper.sliderPos = value
+                    }
+                    Component.onCompleted: {
+                        value = rbffeebumper.sliderPos
+                    }
+                    Connections {
+                        target: rbffeebumper
+                        function onSliderPosChanged() {
+                            feeslider.value = rbffeebumper.sliderPos
+                        }
                     }
                 }
-            }
 
-            FeeMethodComboBox {
-                id: target
-                feeslider: rbffeebumper
+                FeeMethodComboBox {
+                    id: target
+                    feeslider: rbffeebumper
+                }
             }
 
             InfoTextArea {

electrum/gui/qml/components/TxDetails.qml

@@ -99,19 +99,9 @@ Pane {
                 FormattedAmount {
                     visible: !txdetails.isUnrelated
                     Layout.fillWidth: true
-                    showAlt: false
                     amount: txdetails.lnAmount.isEmpty ? txdetails.amount : txdetails.lnAmount
                 }
 
-                Item {
-                    visible: !txdetails.isUnrelated && Daemon.fx.enabled; Layout.preferredWidth: 1; Layout.preferredHeight: 1
-                }
-
-                Label {
-                    visible: !txdetails.isUnrelated && Daemon.fx.enabled && txdetails.lnAmount.satsInt == 0
-                    text: Daemon.fx.fiatValue(txdetails.amount, false) + ' ' + Daemon.fx.fiatCurrency
-                }
-
                 Label {
                     visible: !txdetails.isUnrelated && Daemon.fx.enabled && txdetails.lnAmount.satsInt != 0
                     text: Daemon.fx.fiatValue(txdetails.lnAmount, false) + ' ' + Daemon.fx.fiatCurrency
@@ -130,7 +120,7 @@ Pane {
                     FormattedAmount {
                         Layout.fillWidth: true
                         amount: txdetails.fee
-                        showAlt: false
+                        singleLine: !(txdetails.canBump || txdetails.canCpfp)
                     }
                     FlatButton {
                         Layout.fillWidth: true

electrum/gui/qml/components/controls/FormattedAmount.qml

@@ -5,20 +5,38 @@ import QtQuick.Controls.Material 2.0
 
 import org.electrum 1.0
 
-RowLayout {
+GridLayout {
     required property Amount amount
     property bool showAlt: true
+    property bool singleLine: true
+    property bool valid: true
+
+    columns: !valid
+                ? 1
+                : singleLine
+                    ? 3
+                    : 2
+
+    Item {
+        visible: !valid // empty placeholder if not valid
+        Layout.preferredWidth: 1
+        Layout.preferredHeight: 1
+    }
     Label {
+        visible: valid
         text: amount.msatsInt > 0 ? Config.formatMilliSats(amount) : Config.formatSats(amount)
         font.family: FixedFont
     }
     Label {
+        visible: valid
         text: Config.baseUnit
         color: Material.accentColor
     }
 
     Label {
-        visible: showAlt && Daemon.fx.enabled
+        Layout.columnSpan: singleLine ? 1 : 2
+        visible: showAlt && Daemon.fx.enabled && valid
         text: '(' + Daemon.fx.fiatValue(amount) + ' ' + Daemon.fx.fiatCurrency + ')'
+        font.pixelSize: constants.fontSizeSmall
     }
 }

electrum/gui/qml/qetxfinalizer.py

@@ -448,6 +448,7 @@ class QETxRbfFeeBumper(TxFeeSlider, TxMonMixin):
         self._oldfee_rate = 0
         self._orig_tx = None
         self._rbf = True
+        self._bump_method = 'preserve_payment'
 
     oldfeeChanged = pyqtSignal()
     @pyqtProperty(QEAmount, notify=oldfeeChanged)
@@ -471,6 +472,18 @@ class QETxRbfFeeBumper(TxFeeSlider, TxMonMixin):
             self._oldfee_rate = oldfeerate
             self.oldfeeRateChanged.emit()
 
+    bumpMethodChanged = pyqtSignal()
+    @pyqtProperty(str, notify=bumpMethodChanged)
+    def bumpMethod(self):
+        return self._bump_method
+
+    @bumpMethod.setter
+    def bumpMethod(self, bumpmethod):
+        if self._bump_method != bumpmethod:
+            self._bump_method = bumpmethod
+            self.bumpMethodChanged.emit()
+            self.update()
+
 
     def get_tx(self):
         assert self._txid
@@ -523,6 +536,7 @@ class QETxRbfFeeBumper(TxFeeSlider, TxMonMixin):
                 tx=self._orig_tx,
                 txid=self._txid,
                 new_fee_rate=new_fee_rate,
+                decrease_payment=self._bump_method=='decrease_payment'
             )
         except CannotBumpFee as e:
             self._valid = False