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): Implement loading state for Send/Bridge Modal 

fixes #9107
This commit is contained in:
Khushboo Mehta 2023-01-27 18:46:42 +05:30 committed by Anthony Laibe
parent 8ba10ce6b0
commit 0d369129d5
9 changed files with 105 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/StatusQ/sandbox/pages/StatusCardPage.qml
View File

@ -64,6 +64,16 @@ Item {
card.advancedMode = checked
}
}
StatusCheckBox {
Layout.alignment: Qt.AlignVCenter
text: "loading"
font.family: Theme.palette.monoFont.name
onClicked: {
card.loading = checked
}
}
}
Rectangle {

34
ui/StatusQ/src/StatusQ/Components/StatusCard.qml
View File

@ -158,6 +158,11 @@ Rectangle {
This property holds the max value in the advanced input that can be entered by the user
*/
property real maxAdvancedValue
/*!
\qmlproperty real StatusCard::loading
This property holds id the card is in loading state
*/
property bool loading: false
/*!
\qmlsignal StatusCard::clicked
This signal is emitted when the card is clicked
@ -332,6 +337,13 @@ Rectangle {
}
}
}
Loader {
id: loadingComponent
Layout.preferredHeight: active ? 32 : 0
Layout.fillWidth: true
active: false
sourceComponent: LoadingComponent { radius: 4 }
}
StatusBaseText {
id: tertiaryText
Layout.maximumWidth: layout.width
@ -424,7 +436,11 @@ Rectangle {
}
PropertyChanges {
target: basicInput
visible: !advancedMode
visible: !advancedMode && !(root.loading && !disabled)
}
PropertyChanges {
target: loadingComponent
active: root.loading && !advancedMode && !disabled
}
},
State {
@ -493,7 +509,11 @@ Rectangle {
}
PropertyChanges {
target: basicInput
visible: !advancedMode
visible: !advancedMode && !(root.loading && !disabled)
}
PropertyChanges {
target: loadingComponent
active: root.loading && !advancedMode && !disabled
}
},
State {
@ -562,7 +582,11 @@ Rectangle {
}
PropertyChanges {
target: basicInput
visible: !advancedMode
visible: !advancedMode && !(root.loading && !disabled)
}
PropertyChanges {
target: loadingComponent
active: root.loading && !advancedMode && !disabled
}
},
State {
@ -631,5 +655,9 @@ Rectangle {
target: basicInput
visible: true
}
PropertyChanges {
target: loadingComponent
active: false
}
}
]}

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

@ -14,7 +14,7 @@ ColumnLayout {
id: balancedExceededError
property double amountToSend: 0
property bool isLoading: true
property bool isLoading: false
property int errorType: Constants.NoError
visible: balancedExceededError.errorType !== Constants.NoError || isLoading
@ -27,13 +27,6 @@ ColumnLayout {
color: Theme.palette.dangerColor1
visible: !isLoading
}
StatusLoadingIndicator {
Layout.preferredHeight: 24
Layout.preferredWidth: 24
Layout.alignment: Qt.AlignHCenter
color: Theme.palette.baseColor1
visible: isLoading
}
StatusBaseText {
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
@ -41,8 +34,17 @@ ColumnLayout {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: Theme.palette.dangerColor1
text: isLoading ? qsTr("Calculating fees") : balancedExceededError.errorType === Constants.SendAmountExceedsBalance ?
qsTr("Balance exceeded") : balancedExceededError.errorType === Constants.NoRoute ? qsTr("No route found") : ""
text: balancedExceededError.errorType === Constants.SendAmountExceedsBalance ? qsTr("Balance exceeded") :
balancedExceededError.errorType === Constants.NoRoute ? qsTr("No route found") : ""
wrapMode: Text.WordWrap
visible: !isLoading
}
Loader {
id: loadingComponent
Layout.alignment: Qt.AlignLeft
Layout.preferredHeight: 32
Layout.fillWidth: true
active: isLoading
sourceComponent: LoadingComponent { radius: 4 }
}
}

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

@ -32,22 +32,23 @@ Column {
color: Theme.palette.dangerColor1
visible: !d.isValid && !isLoading
}
StatusLoadingIndicator {
anchors.horizontalCenter: parent.horizontalCenter
width: 24
height: 24
color: Theme.palette.baseColor1
visible: isLoading && d.isValid
}
StyledText {
id: txtValidationError
anchors.horizontalCenter: parent.horizontalCenter
text: isLoading ? qsTr("Calculating fees"): errorType === Constants.SendAmountExceedsBalance ?
qsTr("Balance exceeded") : qsTr("No route found")
text: errorType === Constants.SendAmountExceedsBalance ?
qsTr("Balance exceeded") : qsTr("No route found")
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 13
height: 18
color: Style.current.danger
visible: !isLoading
}
Loader {
id: loadingComponent
height: 32
width: root.width - Style.current.xlPadding
active: isLoading && d.isValid
sourceComponent: LoadingComponent { radius: 4 }
}
}

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

@ -124,12 +124,17 @@ StatusDialog {
color: Theme.palette.baseColor3
}
onIsLoadingChanged: if(isLoading) bestRoutes = []
onSelectedAccountChanged: popup.recalculateRoutesAndFees()
onOpened: {
if(!isBridgeTx) {
store.setDefaultPreferredDisabledChains()
}
else {
store.setAllNetworksAsPreferredChains()
}
amountToSendInput.input.input.edit.forceActiveFocus()
@ -284,7 +289,7 @@ StatusDialog {
id: amountToReceive
Layout.alignment: Qt.AlignRight
Layout.fillWidth:true
visible: popup.bestRoutes !== undefined && popup.bestRoutes.length > 0
visible: popup.bestRoutes !== undefined && popup.bestRoutes.length > 0 && !!amountToSendInput.input.text && amountToSendInput.input.valid
store: popup.store
isLoading: popup.isLoading
selectedAsset: assetSelector.selectedAsset
@ -377,12 +382,14 @@ StatusDialog {
icon.color: Theme.palette.baseColor1
backgroundHoverColor: "transparent"
onClicked: {
popup.isLoading = true
recipientSelector.input.edit.clear()
d.waitTimer.restart()
}
}
}
Keys.onReleased: {
popup.isLoading = true
d.waitTimer.restart()
if(!d.isAddressValid) {
isPending = true
@ -412,6 +419,7 @@ StatusDialog {
store: popup.store
onContactSelected: {
recipientSelector.input.text = address
popup.isLoading = true
d.waitTimer.restart()
}
visible: !d.recipientReady && !isBridgeTx && !!assetSelector.selectedAsset
@ -431,7 +439,7 @@ StatusDialog {
requiredGasInEth: d.totalFeesInEth
selectedAsset: assetSelector.selectedAsset
onReCalculateSuggestedRoute: popup.recalculateRoutesAndFees()
visible: d.recipientReady && !!assetSelector.selectedAsset
visible: d.recipientReady && !!assetSelector.selectedAsset && !!amountToSendInput.input.text
errorType: d.errorType
isLoading: popup.isLoading
bestRoutes: popup.bestRoutes
@ -445,7 +453,7 @@ StatusDialog {
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
visible: d.recipientReady && !!assetSelector.selectedAsset && networkSelector.advancedOrCustomMode
visible: d.recipientReady && !!assetSelector.selectedAsset && networkSelector.advancedOrCustomMode && !!amountToSendInput.input.text
selectedTokenSymbol: assetSelector.selectedAsset ? assetSelector.selectedAsset.symbol: ""
isLoading: popup.isLoading
bestRoutes: popup.bestRoutes
@ -463,7 +471,7 @@ StatusDialog {
maxFiatFees: popup.isLoading ? "..." : LocaleUtils.currencyAmountToLocaleString(d.totalFeesInFiat)
totalTimeEstimate: popup.isLoading? "..." : d.totalTimeEstimate
pending: d.isPendingTx || popup.isLoading
visible: d.recipientReady && amountToSendInput.cryptoValueToSend && amountToSendInput.cryptoValueToSend.amount > 0 && !d.errorMode
visible: d.recipientReady && !!amountToSendInput.cryptoValueToSend && amountToSendInput.cryptoValueToSend.amount > 0 && !d.errorMode && !!amountToSendInput.input.text && amountToSendInput.input.valid
onNextButtonClicked: popup.sendTransaction()
}

20
ui/imports/shared/stores/TransactionStore.qml
View File

@ -117,6 +117,16 @@ QtObject {
addUnpreferredChainsToDisabledChains()
}
function setAllNetworksAsPreferredChains() {
var preferredChains = []
for(var i = 0; i < allNetworks.count; i++) {
let chainId = allNetworks.rowData(i, "chainId") * 1
if(!preferredChainIds.includes(chainId)) {
preferredChainIds.push(chainId)
}
}
}
function resetTxStoreProperties() {
disabledChainIdsFromList = []
disabledChainIdsToList = []
@ -182,10 +192,12 @@ QtObject {
}
}
if(!chainFound && !isBridgeTx)
addPreferredChains([getMainnetChainId()], showUnpreferredNetworks)
else
addPreferredChains(tempPreferredChains, showUnpreferredNetworks)
if(!isBridgeTx) {
if(!chainFound)
addPreferredChains([getMainnetChainId()], showUnpreferredNetworks)
else
addPreferredChains(tempPreferredChains, showUnpreferredNetworks)
}
editedText +="</a></p>"
return {

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

@ -43,6 +43,7 @@ Rectangle {
Column {
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.preferredWidth: root.width - feesIcon.width - Style.current.xlPadding
spacing: isLoading ? 4 : 0
Item {
width: parent.width
height: childrenRect.height

5
ui/imports/shared/views/NetworkCardsComponent.qml
View File

@ -145,8 +145,8 @@ Item {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
amountToSend: root.amountToSend ? root.amountToSend.amount : 0.0
isLoading: root.isLoading
errorType: root.errorType
visible: root.errorType === Constants.NoRoute
}
ColumnLayout {
id: toNetworksLayout
@ -157,7 +157,7 @@ Item {
Layout.maximumWidth: 100
font.pixelSize: 10
color: Theme.palette.baseColor1
text: StatusQUtils.Utils.elideText(selectedAccount.address, 6, 4).toUpperCase()
text: !!selectedAccount ? StatusQUtils.Utils.elideText(selectedAccount.address, 6, 4).toUpperCase() : ""
elide: Text.ElideMiddle
}
Repeater {
@ -182,6 +182,7 @@ Item {
enableText: qsTr("Enable")
disabled: store.disabledChainIdsToList.includes(model.chainId)
clickable: root.interactive
loading: root.isLoading
onClicked: {
store.addRemoveDisabledToChain(model.chainId, disabled)
// only recalculate if the a best route was disabled

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

@ -38,6 +38,7 @@ RowLayout {
ColumnLayout {
Layout.alignment: Qt.AlignTop
Layout.preferredWidth: root.width
spacing: 4
StatusBaseText {
Layout.maximumWidth: 410
font.pixelSize: 15
@ -56,14 +57,14 @@ RowLayout {
}
ScrollView {
Layout.fillWidth: true
Layout.preferredHeight: row.height + 10
Layout.topMargin: Style.current.bigPadding
Layout.preferredHeight: visible ? row.height + 10 : 0
Layout.topMargin: Style.current.smallPadding
contentWidth: row.width
contentHeight: row.height + 10
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ScrollBar.horizontal.policy: ScrollBar.AsNeeded
clip: true
visible: !root.isLoading ? root.isBridgeTx ? true : root.errorType === Constants.NoError : false
visible: root.isBridgeTx ? true : !root.isLoading ? root.errorType === Constants.NoError : false
Column {
id: row
spacing: Style.current.padding
@ -78,10 +79,10 @@ RowLayout {
BalanceExceeded {
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Style.current.bigPadding
Layout.topMargin: Style.current.smallPadding
amountToSend: root.amountToSend ? root.amountToSend.amount : 0.0
isLoading: root.isLoading
errorType: root.errorType
isLoading: root.isLoading && !root.isBridgeTx
}
}
@ -126,7 +127,7 @@ RowLayout {
objectName: chainName
leftPadding: 5
rightPadding: 5
implicitWidth: 150
implicitWidth: 410
title: chainName
property bool tokenBalanceOnChainValid: selectedAccount && selectedAccount !== undefined && selectedAsset !== undefined
property var tokenBalanceOnChain: tokenBalanceOnChainValid ? root.store.getTokenBalanceOnChain(selectedAccount, chainId, selectedAsset.symbol) : undefined
@ -136,11 +137,12 @@ RowLayout {
asset.height: 32
asset.name: Style.svg("tiny/" + iconUrl)
asset.isImage: true
border.color: gasRectangle.checked ? Theme.palette.primaryColor2 : "transparent"
color: {
if (sensor.containsMouse || highlighted || gasRectangle.checked) {
return Theme.palette.baseColor2
return Theme.palette.statusListItem.backgroundColor
}
return Theme.palette.statusListItem.backgroundColor
return Theme.palette.baseColor2
}
onClicked: gasRectangle.toggle()
}