feat(@desktop/wallet): New simple fees component

fixes #16706

storybook/pages/SimpleSendModalPage.qml

@@ -87,6 +87,7 @@ SplitView {
         modal: false
         closePolicy: Popup.CloseOnEscape
 
+        feesLoading: feesLoadingCheckbox.checked
         interactive: interactiveCheckbox.checked
 
         accountsModel: d.walletAccountsModel
@@ -490,6 +491,11 @@ SplitView {
                 checked: true
             }
 
+            CheckBox {
+                id: feesLoadingCheckbox
+                text: "Fees loading"
+            }
+
             Text {
                 text: "Select an accounts"
             }

storybook/pages/SimpleTransactionsFeesPage.qml

@@ -0,0 +1,42 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core.Theme 0.1
+
+import Storybook 1.0
+
+import AppLayouts.Wallet.panels 1.0
+
+SplitView {
+    orientation: Qt.Vertical
+    Logs { id: logs }
+
+    Rectangle {
+        SplitView.fillHeight: true
+        SplitView.fillWidth: true
+        color: Theme.palette.baseColor3
+
+        SimpleTransactionsFees {
+            anchors.centerIn: parent
+            width: 400
+
+            loading: loadingCheckbox.checked
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 200
+
+        logsView.logText: logs.logText
+
+        CheckBox {
+            id: loadingCheckbox
+            text: "loading"
+        }
+    }
+}
+
+// category: Views

ui/app/AppLayouts/Wallet/panels/RecipientSelectorPanel.qml

@@ -130,8 +130,6 @@ Rectangle {
                     rotation: 45
                 },
                 StatusTextWithLoadingState {
-                    font.pixelSize: 15
-                    customColor: Theme.palette.directColor1
                     text: LocaleUtils.currencyAmountToLocaleString(entry.amountCurrency)
                 }
             ]

ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml

@@ -0,0 +1,82 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+Control {
+    id: root
+
+    /** property to set fees in fiat along with fiat symbol **/
+    property alias cryptoFees: cryptoFeesText.text
+    /** property to set fees in crypto along with crypto symbol **/
+    property alias fiatFees: fiatFeesText.text
+
+    /** property to set loading state in the fees component **/
+    property bool loading
+
+    implicitHeight: 64
+
+    padding: Theme.padding
+    topPadding: 12
+    bottomPadding: 12
+
+    background: Rectangle {
+        color: Theme.palette.indirectColor1
+        radius: 8
+    }
+
+    contentItem: RowLayout {
+        width: parent.width
+        spacing: 12
+
+        StatusRoundIcon {
+            Layout.alignment: Qt.AlignTop
+
+            radius: 8
+            asset.name: "gas"
+            asset.color: Theme.palette.directColor1
+        }
+        ColumnLayout {
+            Layout.fillWidth: true
+
+            spacing: 0
+
+            StatusBaseText {
+                Layout.fillWidth: true
+
+                lineHeightMode: Text.FixedHeight
+                lineHeight: 22
+
+                text: qsTr("Est Mainnet transaction fee")
+            }
+            StatusTextWithLoadingState {
+                id: cryptoFeesText
+
+                Layout.fillWidth: true
+
+                loading: root.loading
+                customColor: Theme.palette.baseColor1
+                lineHeightMode: Text.FixedHeight
+                lineHeight: 22
+
+                text: qsTr("0.0007 ETH")
+            }
+        }
+        StatusTextWithLoadingState {
+            id: fiatFeesText
+
+            Layout.alignment: Qt.AlignRight
+
+            loading: root.loading
+            customColor: Theme.palette.baseColor1
+            lineHeightMode: Text.FixedHeight
+            lineHeight: 22
+
+            text: qsTr("1.45 EUR")
+        }
+    }
+}

ui/app/AppLayouts/Wallet/panels/qmldir

@@ -15,3 +15,4 @@ WalletHeader 1.0 WalletHeader.qml
 SendModalHeader 1.0 SendModalHeader.qml
 StickySendModalHeader 1.0 StickySendModalHeader.qml
 RecipientSelectorPanel 1.0 RecipientSelectorPanel.qml
+SimpleTransactionsFees 1.0 SimpleTransactionsFees.qml

ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml

@@ -14,6 +14,7 @@ import shared.controls 1.0
 
 import AppLayouts.Wallet.panels 1.0
 import AppLayouts.Wallet.controls 1.0
+import AppLayouts.Wallet.views 1.0
 import AppLayouts.Wallet 1.0
 
 import utils 1.0
@@ -78,8 +79,10 @@ StatusDialog {
     /** Input function to format currency amount to locale string **/
     required property var fnFormatCurrencyAmount
 
-    /** input property to decide if send mdoal is interactive or prefilled**/
+    /** input property to decide if send modal is interactive or prefilled **/
     property bool interactive
+    /** input property to decide if fees are loading **/
+    property bool feesLoading
 
     /** property to set and expose currently selected account **/
     property string selectedAccountAddress
@@ -176,6 +179,12 @@ StatusDialog {
                                        d.selectedTokenEntry.currentBalance : 0
             return WalletUtils.calculateMaxSafeSendAmount(maxCryptoBalance, d.selectedCryptoTokenSymbol)
         }
+
+        readonly property bool allValuesFilled: !!root.selectedAccountAddress &&
+                                                root.selectedChainId !== 0 &&
+                                                !!root.selectedTokenKey &&
+                                                !!root.selectedRecipientAddress &&
+                                                !!root.selectedAmount
     }
 
     width: 556
@@ -205,7 +214,13 @@ StatusDialog {
         anchors.top: parent.top
 
         implicitWidth: parent.width
-        implicitHeight: scrollView.implicitHeight
+        implicitHeight: Math.max(sendModalHeader.height +
+                                 amountToSend.height +
+                                 recipientsPanelLayout.height +
+                                 feesLayout.height +
+                                 scrollViewLayout.spacing*3 +
+                                 28,
+                                 scrollView.implicitHeight)
 
         // Floating account Selector
         AccountSelectorHeader {
@@ -358,20 +373,22 @@ StatusDialog {
                 /** TODO: replace with new and improved recipient selector TBD under
                 https://github.com/status-im/status-desktop/issues/16916 **/
                 ColumnLayout {
-                    spacing: Theme.halfPadding
+                    id: recipientsPanelLayout
+
                     Layout.fillWidth: true
+
+                    spacing: Theme.halfPadding
+
                     StatusBaseText {
                         elide: Text.ElideRight
                         text: qsTr("To")
-                        font.pixelSize: 15
-                        color: Theme.palette.directColor1
                     }
                     RecipientSelectorPanel {
                         id: recipientsPanel
 
                         Layout.fillWidth: true
                         Layout.fillHeight: true
-                        Layout.bottomMargin: Theme.xlPadding
+                        Layout.bottomMargin: feesLayout.visible ? 0 : Theme.xlPadding
 
                         savedAddressesModel: root.savedAddressesModel
                         myAccountsModel: root.accountsModel
@@ -380,6 +397,27 @@ StatusDialog {
                         onResolveENS: root.fnResolveENS(ensName, uuid)
                     }
                 }
+
+                // Fees Component
+                ColumnLayout {
+                    id: feesLayout
+
+                    Layout.fillWidth: true
+                    Layout.bottomMargin: Theme.xlPadding
+
+                    spacing: Theme.halfPadding
+
+                    StatusBaseText {
+                        elide: Text.ElideRight
+                        text: qsTr("Fees")
+                    }
+                    SimpleTransactionsFees {
+                        Layout.fillWidth: true
+
+                        loading: root.feesLoading
+                    }
+                    visible: d.allValuesFilled
+                }
             }
         }
     }