status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

fixes #16706
This commit is contained in:
Khushboo Mehta 2024-12-07 22:18:06 +01:00
parent 6ecb636ec2
commit 77003fb052
6 changed files with 175 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
storybook/pages/SimpleSendModalPage.qml
View File

@ -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"
}

42
storybook/pages/SimpleTransactionsFeesPage.qml Normal file
View File

@ -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

2
ui/app/AppLayouts/Wallet/panels/RecipientSelectorPanel.qml
View File

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

82
ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml Normal file
View File

@ -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")
}
}
}

1
ui/app/AppLayouts/Wallet/panels/qmldir
View File

@ -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

50
ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml
View File

@ -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
}
}
}
}