status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-22 11:38:57 +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
SendModal {
id: sendTransactionWithEns
anchors.centerIn: parent
store: root.rootStore
contactsStore: root.contactsStore
onClosed: {

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

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

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

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

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

@ -176,6 +176,7 @@ Item {
font.weight: Font.Medium
font.pixelSize: 13
color: Style.current.textColor
visible: root.suggestedFees.eip1559Enabled && advancedMode
}
StyledText {
@ -193,6 +194,7 @@ Item {
StatusButton {
anchors.verticalCenter: prioritytext.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.bigPadding
height: 22
defaultTopPadding: 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.Layouts 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import utils 1.0
import "../status"
import "../"
@ -10,7 +13,7 @@ import "../panels"
// TODO: use StatusQ components here
Column {
id: root
anchors.horizontalCenter: parent.horizontalCenter
visible: !isValid
spacing: 5
@ -29,11 +32,10 @@ Column {
onSelectedNetworkChanged: validate()
function validate() {
let isValid = true
let isValid = false
if (!(selectedAccount && selectedAccount.assets && selectedAsset && selectedGasEthValue > 0)) {
return root.isValid
}
isValid = true
let gasTotal = selectedGasEthValue
if (selectedAsset && selectedAsset.symbol && selectedAsset.symbol.toUpperCase() === "ETH") {
gasTotal += selectedAmount
@ -41,21 +43,18 @@ Column {
const chainId = (selectedNetwork && selectedNetwork.chainId) || Global.currentChainId
const currAcctGasAsset = Utils.findAssetByChainAndSymbol(chainId, selectedAccount.assets, "ETH")
if (currAcctGasAsset && currAcctGasAsset.totalBalance < gasTotal) {
isValid = false
if (currAcctGasAsset && currAcctGasAsset.totalBalance > gasTotal) {
isValid = true
}
root.isValid = isValid
return isValid
}
SVGImage {
id: imgExclamation
width: 13.33
height: 13.33
sourceSize.height: height * 2
sourceSize.width: width * 2
StatusIcon {
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: Style.svg("exclamation_outline")
height: 20
width: 20
icon: "cancel"
color: Theme.palette.dangerColor1
}
StyledText {
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.Dialogs 1.3
import QtGraphicalEffects 1.0
import StatusQ.Controls.Validators 0.1
import utils 1.0
import shared.stores 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.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls.Validators 0.1
import "../panels"
import "../controls"
import "../views"
StatusModal {
StatusDialog {
id: popup
property alias stack: stack
@ -74,8 +75,9 @@ StatusModal {
QtObject {
id: d
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
property bool recipientReady: recipientSelector.isValid && !recipientSelector.isPending
onIsReadyChanged: {
if(!isReady && stack.isLastGroup)
stack.back()
@ -84,11 +86,11 @@ StatusModal {
width: 556
height: 595
showHeader: false
showFooter: false
showAdvancedFooter: d.isReady && !isNaN(parseFloat(amountToSendInput.text)) && gasValidator.isValid
showAdvancedHeader: true
backgroundColor: Theme.palette.baseColor3
padding: 0
background: StatusDialogBackground {
color: Theme.palette.baseColor3
}
onSelectedAccountChanged: popup.recalculateRoutesAndFees()
@ -104,8 +106,9 @@ StatusModal {
popup.recalculateRoutesAndFees()
}
hasFloatingButtons: true
advancedHeaderComponent: SendModalHeader {
header: SendModalHeader {
anchors.top: parent.top
anchors.topMargin: -height - 18
model: popup.store.accounts
selectedAccount: popup.selectedAccount
onUpdatedSelectedAccount: {
@ -116,8 +119,6 @@ StatusModal {
TransactionStackView {
id: stack
property alias currentGroup: stack.currentGroup
anchors.topMargin: Style.current.xlPadding
anchors.bottomMargin: popup.showAdvancedFooter && !!advancedFooter ? advancedFooter.height : Style.current.padding
TransactionFormGroup {
id: group1
anchors.fill: parent
@ -266,10 +267,9 @@ StatusModal {
StatusScrollView {
id: scrollView
height: stack.height - assetAndAmmountSelector.height
height: stack.height - assetAndAmmountSelector.height - Style.current.bigPadding
width: parent.width
anchors.top: border.bottom
anchors.topMargin: Style.current.halfPadding
anchors.left: parent.left
z: 0
@ -299,6 +299,21 @@ StatusModal {
Layout.fillWidth: true
Layout.leftMargin: 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 {
@ -310,6 +325,7 @@ StatusModal {
Layout.fillWidth: true
Layout.leftMargin: Style.current.bigPadding
Layout.rightMargin: Style.current.bigPadding
visible: !d.recipientReady
}
NetworkSelector {
@ -328,16 +344,18 @@ StatusModal {
Layout.fillWidth: true
Layout.leftMargin: Style.current.bigPadding
Layout.rightMargin: Style.current.bigPadding
visible: d.recipientReady
}
Rectangle {
id: fees
radius: 13
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.leftMargin: Style.current.bigPadding
Layout.rightMargin: Style.current.bigPadding
visible: d.recipientReady
RowLayout {
id: feesLayout
@ -355,6 +373,15 @@ StatusModal {
ColumnLayout {
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
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 {
id: gasSelector
Layout.fillWidth: true
@ -395,7 +422,6 @@ StatusModal {
GasValidator {
id: gasValidator
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
selectedAccount: popup.selectedAccount
selectedAmount: amountToSendInput.text === "" ? 0.0 :
parseFloat(amountToSendInput.text)
@ -429,12 +455,13 @@ StatusModal {
}
}
advancedFooterComponent: SendModalFooter {
footer: SendModalFooter {
maxFiatFees: gasSelector.maxFiatFees
estimatedTxTimeFlag: gasSelector.estimatedTxTimeFlag
currentGroupPending: stack.currentGroup.isPending
currentGroupValid: stack.currentGroup.isValid
isLastGroup: stack.isLastGroup
visible: d.isReady && !isNaN(parseFloat(amountToSendInput.text)) && gasValidator.isValid
onNextButtonClicked: {
const validity = stack.currentGroup.validate()
if (validity.isValid && !validity.isPending) {

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

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

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

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

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

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

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

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

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

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

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

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