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

fix(SwapModal) disable exchange button when params empty 

- when we arrive to a point when all input params are empty, disable the
middle Exchange button
- add QML test for the Exchange button enabled/disabled state

Fixes #15751
This commit is contained in:
Lukáš Tinkl 2024-07-24 02:33:26 +02:00 committed by Lukáš Tinkl
parent 16e55505c0
commit ee01c20b88
4 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
storybook/qmlTests/tests/tst_SwapModal.qml
View File

@ -47,7 +47,7 @@ Item {
signal fetchSuggestedRoutesCalled()
}
readonly property var swapAdaptor: SwapModalAdaptor {
readonly property SwapModalAdaptor swapAdaptor: SwapModalAdaptor {
currencyStore: CurrenciesStore {}
walletAssetsStore: WalletAssetsStore {
id: thisWalletAssetStore
@ -1307,6 +1307,32 @@ Item {
}
}
function test_modal_exchange_button_enabled_state_data() {
return [
{fromToken: "", fromTokenAmount: "", toToken: "", toTokenAmount: ""},
{fromToken: "", fromTokenAmount: "", toToken: "STT", toTokenAmount: ""},
{fromToken: "ETH", fromTokenAmount: "", toToken: "", toTokenAmount: ""},
{fromToken: "ETH", fromTokenAmount: "", toToken: "STT", toTokenAmount: ""},
{fromToken: "ETH", fromTokenAmount: "100", toToken: "STT", toTokenAmount: ""},
{fromToken: "ETH", fromTokenAmount: "", toToken: "STT", toTokenAmount: "50"},
{fromToken: "ETH", fromTokenAmount: "100", toToken: "STT", toTokenAmount: "50"},
{fromToken: "", fromTokenAmount: "", toToken: "", toTokenAmount: "50"},
{fromToken: "", fromTokenAmount: "100", toToken: "", toTokenAmount: ""}
]
}
function test_modal_exchange_button_enabled_state(data) {
const swapExchangeButton = findChild(controlUnderTest, "swapExchangeButton")
verify(!!swapExchangeButton)
root.swapFormData.fromTokensKey = data.fromToken
root.swapFormData.fromTokenAmount = data.fromTokenAmount
root.swapFormData.toTokenKey = data.toToken
root.swapFormData.toTokenAmount = data.toTokenAmount
tryCompare(swapExchangeButton, "enabled", !!data.fromToken || !!data.toToken)
}
function test_modal_exchange_button_default_state_data() {
return [
{fromToken: "", fromTokenAmount: "", toToken: "", toTokenAmount: ""},

2
ui/app/AppLayouts/Wallet/controls/SwapExchangeButton.qml
View File

@ -15,6 +15,8 @@ StatusButton {
isRoundIcon: true
radius: height/2
normalColor: Theme.palette.indirectColor3
disabledColor: normalColor
opacity: enabled ? 1 : 0.4
hoverColor: Theme.palette.directColor8
borderWidth: 1
borderColor: hovered ? Theme.palette.directColor7 : Theme.palette.directColor8

3
ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml
View File

@ -59,7 +59,6 @@ Control {
readonly property int rawValueMultiplierIndex: amountToSendInput.multiplierIndex
readonly property bool valueValid: amountToSendInput.inputNumberValid
readonly property bool amountEnteredGreaterThanBalance: value > maxSendButton.maxSafeValue
readonly property string accountBalanceFormatted: root.currencyStore.formatCurrencyAmount(d.maxCryptoBalance, d.selectedHolding.symbol)
// visual properties
property int swapExchangeButtonWidth: 44
@ -250,7 +249,7 @@ Control {
Layout.alignment: Qt.AlignRight
model: d.adaptor.outputAssetsModel
nonInteractiveDelegateKey: root.nonInteractiveTokensKey
onActivated: amountToSendInput.input.forceActiveFocus()
onActivated: if (root.interactive) amountToSendInput.input.forceActiveFocus()
}
Item { Layout.fillHeight: !maxSendButton.visible }

14
ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml
View File

@ -216,11 +216,8 @@ StatusDialog {
swapSide: SwapInputPanel.SwapSide.Pay
swapExchangeButtonWidth: swapExchangeButton.width
onSelectedHoldingIdChanged: {
if(!!selectedHoldingId) {
root.swapInputParamsForm.fromTokensKey = selectedHoldingId
}
}
onSelectedHoldingIdChanged: root.swapInputParamsForm.fromTokensKey = selectedHoldingId
onRawValueChanged: {
if(root.swapInputParamsForm.fromTokensKey === selectedHoldingId) {
const amount = !tokenAmount && value === 0 ? "" :
@ -262,11 +259,7 @@ StatusDialog {
mainInputLoading: root.swapAdaptor.swapProposalLoading
bottomTextLoading: root.swapAdaptor.swapProposalLoading
onSelectedHoldingIdChanged: {
if(!!selectedHoldingId) {
root.swapInputParamsForm.toTokenKey = selectedHoldingId
}
}
onSelectedHoldingIdChanged: root.swapInputParamsForm.toTokenKey = selectedHoldingId
/* TODO: keep this input as disabled until the work for adding a param to handle to
and from tokens inputed is supported by backend under
@ -278,6 +271,7 @@ StatusDialog {
id: swapExchangeButton
objectName: "swapExchangeButton"
anchors.centerIn: parent
enabled: !!root.swapInputParamsForm.fromTokensKey || !!root.swapInputParamsForm.toTokenKey
onClicked: {
const tempPayToken = root.swapInputParamsForm.fromTokensKey
const tempPayAmount = root.swapInputParamsForm.fromTokenAmount