status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-23 03:58:49 +00:00
Code Issues Projects Releases Wiki Activity

feat(@desktop/wallet): Send modal should work as a wizard and use StatusDialog instead of StatusModal

Browse Source 
fixes #6587
This commit is contained in:
Khushboo Mehta 2022-07-27 23:10:00 +02:00 committed by Khushboo-dev-cpp
parent 39cf2f3fac
commit 76d7ca089c
13 changed files with 81 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/StatusQ

@ -1 +1 @@
Subproject commit dbc0c1960a478bb740167275e76f56d2bef41d15 Subproject commit f4bf830ae7af5979255b383920980bf4d3a4b251

1
ui/app/AppLayouts/Chat/views/ChatColumnView.qml
View File

@ -390,7 +390,6 @@ Item {
id: cmpSendTransactionWithEns id: cmpSendTransactionWithEns
SendModal { SendModal {
id: sendTransactionWithEns id: sendTransactionWithEns
anchors.centerIn: parent
store: root.rootStore store: root.rootStore
contactsStore: root.contactsStore contactsStore: root.contactsStore
onClosed: { onClosed: {

1
ui/app/mainui/AppMain.qml
View File

@ -857,7 +857,6 @@ Item {
} }
property var selectedAccount property var selectedAccount
sourceComponent: SendModal { sourceComponent: SendModal {
anchors.centerIn: parent
store: appMain.rootStore store: appMain.rootStore
contactsStore: appMain.rootStore.profileSectionStore.contactsStore contactsStore: appMain.rootStore.profileSectionStore.contactsStore
onClosed: { onClosed: {

9
ui/imports/shared/controls/BalanceExceeded.qml
View File

@ -16,15 +16,18 @@ ColumnLayout {
property bool transferPossible: false property bool transferPossible: false
property double amountToSend: 0 property double amountToSend: 0
StatusIcon {
Layout.alignment: Qt.AlignHCenter
visible: !balancedExceededError.transferPossible && balancedExceededError.amountToSend > 0 visible: !balancedExceededError.transferPossible && balancedExceededError.amountToSend > 0
StatusIcon {
Layout.preferredHeight: 20
Layout.preferredWidth: 20
Layout.alignment: Qt.AlignHCenter
icon: "cancel" icon: "cancel"
color: Theme.palette.dangerColor1 color: Theme.palette.dangerColor1
} }
StatusBaseText { StatusBaseText {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
font.pixelSize: 15 font.pixelSize: 13
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
color: Theme.palette.dangerColor1 color: Theme.palette.dangerColor1

2
ui/imports/shared/controls/GasSelector.qml
View File

@ -176,6 +176,7 @@ Item {
font.weight: Font.Medium font.weight: Font.Medium
font.pixelSize: 13 font.pixelSize: 13
color: Style.current.textColor color: Style.current.textColor
visible: root.suggestedFees.eip1559Enabled && advancedMode
} }
StyledText { StyledText {
@ -193,6 +194,7 @@ Item {
StatusButton { StatusButton {
anchors.verticalCenter: prioritytext.verticalCenter anchors.verticalCenter: prioritytext.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.bigPadding
height: 22 height: 22
defaultTopPadding: 2 defaultTopPadding: 2
defaultBottomPadding: 2 defaultBottomPadding: 2

25
ui/imports/shared/controls/GasValidator.qml
View File

@ -2,6 +2,9 @@ import QtQuick 2.13
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import utils 1.0 import utils 1.0
import "../status" import "../status"
import "../" import "../"
@ -10,7 +13,7 @@ import "../panels"
// TODO: use StatusQ components here // TODO: use StatusQ components here
Column { Column {
id: root id: root
anchors.horizontalCenter: parent.horizontalCenter
visible: !isValid visible: !isValid
spacing: 5 spacing: 5
@ -29,11 +32,10 @@ Column {
onSelectedNetworkChanged: validate() onSelectedNetworkChanged: validate()
function validate() { function validate() {
let isValid = true let isValid = false
if (!(selectedAccount && selectedAccount.assets && selectedAsset && selectedGasEthValue > 0)) { if (!(selectedAccount && selectedAccount.assets && selectedAsset && selectedGasEthValue > 0)) {
return root.isValid return root.isValid
} }
isValid = true
let gasTotal = selectedGasEthValue let gasTotal = selectedGasEthValue
if (selectedAsset && selectedAsset.symbol && selectedAsset.symbol.toUpperCase() === "ETH") { if (selectedAsset && selectedAsset.symbol && selectedAsset.symbol.toUpperCase() === "ETH") {
gasTotal += selectedAmount gasTotal += selectedAmount
@ -41,21 +43,18 @@ Column {
const chainId = (selectedNetwork && selectedNetwork.chainId) || Global.currentChainId const chainId = (selectedNetwork && selectedNetwork.chainId) || Global.currentChainId
const currAcctGasAsset = Utils.findAssetByChainAndSymbol(chainId, selectedAccount.assets, "ETH") const currAcctGasAsset = Utils.findAssetByChainAndSymbol(chainId, selectedAccount.assets, "ETH")
if (currAcctGasAsset && currAcctGasAsset.totalBalance < gasTotal) { if (currAcctGasAsset && currAcctGasAsset.totalBalance > gasTotal) {
isValid = false isValid = true
} }
root.isValid = isValid root.isValid = isValid
return isValid return isValid
} }
SVGImage { StatusIcon {
id: imgExclamation
width: 13.33
height: 13.33
sourceSize.height: height * 2
sourceSize.width: width * 2
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit height: 20
source: Style.svg("exclamation_outline") width: 20
icon: "cancel"
color: Theme.palette.dangerColor1
} }
StyledText { StyledText {
id: txtValidationError id: txtValidationError

63
ui/imports/shared/popups/SendModal.qml
View File

@ -3,22 +3,23 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3 import QtQuick.Dialogs 1.3
import QtGraphicalEffects 1.0 import QtGraphicalEffects 1.0
import StatusQ.Controls.Validators 0.1
import utils 1.0 import utils 1.0
import shared.stores 1.0 import shared.stores 1.0
import shared.panels 1.0 import shared.panels 1.0
import StatusQ.Popups 0.1 import StatusQ.Controls 0.1
import StatusQ.Popups.Dialog 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Controls.Validators 0.1
import "../panels" import "../panels"
import "../controls" import "../controls"
import "../views" import "../views"
StatusModal { StatusDialog {
id: popup id: popup
property alias stack: stack property alias stack: stack
@ -74,8 +75,9 @@ StatusModal {
QtObject { QtObject {
id: d id: d
readonly property string maxFiatBalance: Utils.stripTrailingZeros(parseFloat(assetSelector.selectedAsset.totalBalance).toFixed(4)) readonly property string maxFiatBalance: Utils.stripTrailingZeros(parseFloat(assetSelector.selectedAsset.totalBalance).toFixed(4))
readonly property bool isReady: amountToSendInput.valid && !amountToSendInput.pending && recipientSelector.isValid && !recipientSelector.isPending readonly property bool isReady: amountToSendInput.valid && !amountToSendInput.pending && recipientReady
readonly property bool errorMode: networkSelector.suggestedRoutes && networkSelector.suggestedRoutes.length <= 0 || networkSelector.errorMode readonly property bool errorMode: networkSelector.suggestedRoutes && networkSelector.suggestedRoutes.length <= 0 || networkSelector.errorMode
property bool recipientReady: recipientSelector.isValid && !recipientSelector.isPending
onIsReadyChanged: { onIsReadyChanged: {
if(!isReady && stack.isLastGroup) if(!isReady && stack.isLastGroup)
stack.back() stack.back()
@ -84,11 +86,11 @@ StatusModal {
width: 556 width: 556
height: 595 height: 595
showHeader: false
showFooter: false padding: 0
showAdvancedFooter: d.isReady && !isNaN(parseFloat(amountToSendInput.text)) && gasValidator.isValid background: StatusDialogBackground {
showAdvancedHeader: true color: Theme.palette.baseColor3
backgroundColor: Theme.palette.baseColor3 }
onSelectedAccountChanged: popup.recalculateRoutesAndFees() onSelectedAccountChanged: popup.recalculateRoutesAndFees()
@ -104,8 +106,9 @@ StatusModal {
popup.recalculateRoutesAndFees() popup.recalculateRoutesAndFees()
} }
hasFloatingButtons: true header: SendModalHeader {
advancedHeaderComponent: SendModalHeader { anchors.top: parent.top
anchors.topMargin: -height - 18
model: popup.store.accounts model: popup.store.accounts
selectedAccount: popup.selectedAccount selectedAccount: popup.selectedAccount
onUpdatedSelectedAccount: { onUpdatedSelectedAccount: {
@ -116,8 +119,6 @@ StatusModal {
TransactionStackView { TransactionStackView {
id: stack id: stack
property alias currentGroup: stack.currentGroup property alias currentGroup: stack.currentGroup
anchors.topMargin: Style.current.xlPadding
anchors.bottomMargin: popup.showAdvancedFooter && !!advancedFooter ? advancedFooter.height : Style.current.padding
TransactionFormGroup { TransactionFormGroup {
id: group1 id: group1
anchors.fill: parent anchors.fill: parent
@ -266,10 +267,9 @@ StatusModal {
StatusScrollView { StatusScrollView {
id: scrollView id: scrollView
height: stack.height - assetAndAmmountSelector.height height: stack.height - assetAndAmmountSelector.height - Style.current.bigPadding
width: parent.width width: parent.width
anchors.top: border.bottom anchors.top: border.bottom
anchors.topMargin: Style.current.halfPadding
anchors.left: parent.left anchors.left: parent.left
z: 0 z: 0
@ -299,6 +299,21 @@ StatusModal {
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: Style.current.bigPadding Layout.leftMargin: Style.current.bigPadding
Layout.rightMargin: Style.current.bigPadding Layout.rightMargin: Style.current.bigPadding
StatusButton {
anchors.right: parent.right
anchors.rightMargin: 16
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
visible: recipientSelector.input.textField.text === ""
border.width: 1
border.color: Theme.palette.primaryColor1
size: StatusBaseButton.Size.Tiny
text: qsTr("Paste")
onClicked: recipientSelector.input.textField.paste()
}
} }
TabAddressSelectorView { TabAddressSelectorView {
@ -310,6 +325,7 @@ StatusModal {
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: Style.current.bigPadding Layout.leftMargin: Style.current.bigPadding
Layout.rightMargin: Style.current.bigPadding Layout.rightMargin: Style.current.bigPadding
visible: !d.recipientReady
} }
NetworkSelector { NetworkSelector {
@ -328,16 +344,18 @@ StatusModal {
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: Style.current.bigPadding Layout.leftMargin: Style.current.bigPadding
Layout.rightMargin: Style.current.bigPadding Layout.rightMargin: Style.current.bigPadding
visible: d.recipientReady
} }
Rectangle { Rectangle {
id: fees id: fees
radius: 13 radius: 13
color: Theme.palette.indirectColor1 color: Theme.palette.indirectColor1
implicitHeight: gasSelector.visible || gasValidator.visible ? feesLayout.height + gasValidator.height : 0 Layout.preferredHeight: text.height + gasSelector.height + gasValidator.height + Style.current.padding
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: Style.current.bigPadding Layout.leftMargin: Style.current.bigPadding
Layout.rightMargin: Style.current.bigPadding Layout.rightMargin: Style.current.bigPadding
visible: d.recipientReady
RowLayout { RowLayout {
id: feesLayout id: feesLayout
@ -355,6 +373,15 @@ StatusModal {
ColumnLayout { ColumnLayout {
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.preferredWidth: fees.width - feesIcon.width - Style.current.xlPadding Layout.preferredWidth: fees.width - feesIcon.width - Style.current.xlPadding
StatusBaseText {
id: text
Layout.maximumWidth: 410
font.pixelSize: 15
font.weight: Font.Medium
color: Theme.palette.directColor1
text: qsTr("Fees")
wrapMode: Text.WordWrap
}
GasSelector { GasSelector {
id: gasSelector id: gasSelector
Layout.fillWidth: true Layout.fillWidth: true
@ -395,7 +422,6 @@ StatusModal {
GasValidator { GasValidator {
id: gasValidator id: gasValidator
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
selectedAccount: popup.selectedAccount selectedAccount: popup.selectedAccount
selectedAmount: amountToSendInput.text === "" ? 0.0 : selectedAmount: amountToSendInput.text === "" ? 0.0 :
parseFloat(amountToSendInput.text) parseFloat(amountToSendInput.text)
@ -429,12 +455,13 @@ StatusModal {
} }
} }
advancedFooterComponent: SendModalFooter { footer: SendModalFooter {
maxFiatFees: gasSelector.maxFiatFees maxFiatFees: gasSelector.maxFiatFees
estimatedTxTimeFlag: gasSelector.estimatedTxTimeFlag estimatedTxTimeFlag: gasSelector.estimatedTxTimeFlag
currentGroupPending: stack.currentGroup.isPending currentGroupPending: stack.currentGroup.isPending
currentGroupValid: stack.currentGroup.isValid currentGroupValid: stack.currentGroup.isValid
isLastGroup: stack.isLastGroup isLastGroup: stack.isLastGroup
visible: d.isReady && !isNaN(parseFloat(amountToSendInput.text)) && gasValidator.isValid
onNextButtonClicked: { onNextButtonClicked: {
const validity = stack.currentGroup.validate() const validity = stack.currentGroup.validate()
if (validity.isValid && !validity.isPending) { if (validity.isValid && !validity.isPending) {

1
ui/imports/shared/popups/SignTransactionModal.qml
View File

@ -179,6 +179,7 @@ StatusModal {
GasValidator { GasValidator {
id: gasValidator id: gasValidator
anchors.top: gasSelector.bottom anchors.top: gasSelector.bottom
anchors.horizontalCenter: parent.horizontalCenter
selectedAccount: selectFromAccount.selectedAccount selectedAccount: selectFromAccount.selectedAccount
selectedAmount: parseFloat(root.selectedAmount) selectedAmount: parseFloat(root.selectedAmount)
selectedAsset: root.selectedAsset selectedAsset: root.selectedAsset

1
ui/imports/shared/status/StatusETHTransactionModal.qml
View File

@ -133,6 +133,7 @@ ModalPopup {
GasValidator { GasValidator {
id: gasValidator id: gasValidator
anchors.top: gasSelector.bottom anchors.top: gasSelector.bottom
anchors.horizontalCenter: parent.horizontalCenter
selectedAccount: selectFromAccount.selectedAccount selectedAccount: selectFromAccount.selectedAccount
selectedAsset: root.asset selectedAsset: root.asset
selectedAmount: 0 selectedAmount: 0

1
ui/imports/shared/status/StatusSNTTransactionModal.qml
View File

@ -151,6 +151,7 @@ ModalPopup {
GasValidator { GasValidator {
id: gasValidator id: gasValidator
anchors.top: gasSelector.bottom anchors.top: gasSelector.bottom
anchors.horizontalCenter: parent.horizontalCenter
selectedAccount: selectFromAccount.selectedAccount selectedAccount: selectFromAccount.selectedAccount
selectedAsset: root.asset selectedAsset: root.asset
selectedAmount: parseFloat(root.assetPrice) selectedAmount: parseFloat(root.assetPrice)

1
ui/imports/shared/views/NetworkSelector.qml
View File

@ -70,6 +70,7 @@ Item {
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
anchors.margins: Style.current.padding anchors.margins: Style.current.padding
width: stackLayout.width - Style.current.bigPadding
selectedNetwork: root.selectedNetwork selectedNetwork: root.selectedNetwork
suggestedRoutes: root.suggestedRoutes suggestedRoutes: root.suggestedRoutes
amountToSend: root.amountToSend amountToSend: root.amountToSend

4
ui/imports/shared/views/NetworksSimpleRoutingView.qml
View File

@ -30,6 +30,7 @@ RowLayout {
} }
ColumnLayout { ColumnLayout {
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.preferredWidth: networksSimpleRoutingView.width
StatusBaseText { StatusBaseText {
Layout.maximumWidth: 410 Layout.maximumWidth: 410
font.pixelSize: 15 font.pixelSize: 15
@ -46,8 +47,9 @@ RowLayout {
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
BalanceExceeded { BalanceExceeded {
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Style.current.bigPadding Layout.topMargin: Style.current.bigPadding
Layout.alignment: Qt.AlignCenter
visible: !transferPossible visible: !transferPossible
transferPossible: networksSimpleRoutingView.suggestedRoutes ? networksSimpleRoutingView.suggestedRoutes.length > 0 : false transferPossible: networksSimpleRoutingView.suggestedRoutes ? networksSimpleRoutingView.suggestedRoutes.length > 0 : false
amountToSend: networksSimpleRoutingView.amountToSend amountToSend: networksSimpleRoutingView.amountToSend

11
ui/imports/shared/views/TabAddressSelectorView.qml
View File

@ -25,6 +25,11 @@ Item {
signal contactSelected(string address, int type) signal contactSelected(string address, int type)
QtObject {
id: d
readonly property int maxHeightForList: 281
}
StatusTabBar { StatusTabBar {
id: accountSelectionTabBar id: accountSelectionTabBar
anchors.top: parent.top anchors.top: parent.top
@ -68,7 +73,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top anchors.top: parent.top
implicitWidth: parent.width implicitWidth: parent.width
height: Math.min(288, savedAddresses.contentHeight) height: Math.min(d.maxHeightForList, savedAddresses.contentHeight)
model: root.store.savedAddressesModel model: root.store.savedAddressesModel
header: savedAddresses.count > 0 ? search : nothingInList header: savedAddresses.count > 0 ? search : nothingInList
@ -139,7 +144,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top anchors.top: parent.top
width: parent.width width: parent.width
height: Math.min(288, myAccounts.contentHeight) height: Math.min(d.maxHeightForList, myAccounts.contentHeight)
delegate: StatusListItem { delegate: StatusListItem {
implicitWidth: parent.width implicitWidth: parent.width
@ -172,7 +177,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top anchors.top: parent.top
width: parent.width width: parent.width
height: Math.min(288, recents.contentHeight) height: Math.min(d.maxHeightForList, recents.contentHeight)
header: StatusBaseText { header: StatusBaseText {
height: visible ? 56 : 0 height: visible ? 56 : 0