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

Token/Asset selectors fixes 

- clear search on close (AssetSelectorCompact)
- sectionProperty removed
- highlighting fixed in TokenSelectorPanel
- setCustom renamed to setSelection
- test data moved into Component object
This commit is contained in:
Michał Cieślak 2024-09-23 10:15:01 +02:00 committed by Michał
parent 249e1ae042
commit 00fe754c0d
13 changed files with 172 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
storybook/pages/AssetSelectorCompactPage.qml
View File

@ -23,7 +23,7 @@ Pane {
}
],
sectionText: "My assets on Mainnet"
sectionName: "My assets on Mainnet"
},
{
tokensKey: "key_2",
@ -41,7 +41,7 @@ Pane {
}
],
sectionText: "My assets on Mainnet"
sectionName: "My assets on Mainnet"
},
{
tokensKey: "key_2",
@ -53,7 +53,7 @@ Pane {
tokensKey: "DAI",
balances: [],
sectionText: "Popular assets"
sectionName: "Popular assets"
},
{
tokensKey: "key_3",
@ -65,7 +65,7 @@ Pane {
tokensKey: "ZRX",
balances: [],
sectionText: "Popular assets"
sectionName: "Popular assets"
}
]
@ -86,7 +86,6 @@ Pane {
width: 400
model: assetsModel
sectionProperty: "sectionText"
onSelected: console.log("asset selected:", key)
}

9
storybook/pages/AssetSelectorPage.qml
View File

@ -22,7 +22,7 @@ Pane {
}
],
sectionText: "My assets on Mainnet"
sectionName: "My assets on Mainnet"
},
{
tokensKey: "eth_key",
@ -39,7 +39,7 @@ Pane {
}
],
sectionText: "My assets on Mainnet"
sectionName: "My assets on Mainnet"
},
{
tokensKey: "dai_key",
@ -50,7 +50,7 @@ Pane {
iconSource: Constants.tokenIcon("DAI"),
balances: [],
sectionText: "Popular assets"
sectionName: "Popular assets"
},
{
tokensKey: "zrx_key",
@ -61,7 +61,7 @@ Pane {
iconSource: Constants.tokenIcon("ZRX"),
balances: [],
sectionText: "Popular assets"
sectionName: "Popular assets"
}
]
@ -81,7 +81,6 @@ Pane {
anchors.centerIn: parent
model: assetsModel
sectionProperty: "sectionText"
onSelected: console.log("asset selected:", key)
}

9
storybook/pages/SearchableAssetsPanelPage.qml
View File

@ -29,7 +29,7 @@ Pane {
}
],
sectionText: ""
sectionName: ""
},
{
tokensKey: "eth_key",
@ -53,7 +53,7 @@ Pane {
}
],
sectionText: ""
sectionName: ""
},
{
tokensKey: "dai_key",
@ -64,7 +64,7 @@ Pane {
iconSource: Constants.tokenIcon("DAI"),
balances: [],
sectionText: "Popular assets"
sectionName: "Popular assets"
},
{
tokensKey: "zrx_key",
@ -75,7 +75,7 @@ Pane {
iconSource: Constants.tokenIcon("ZRX"),
balances: [],
sectionText: "Popular assets"
sectionName: "Popular assets"
}
]
@ -102,7 +102,6 @@ Pane {
highlightedKey: "key_2"
model: assetsModel
sectionProperty: "sectionText"
onSelected: console.log("selected:", key)
}

114
storybook/qmlTests/tests/tst_AssetSelector.qml
View File

@ -12,60 +12,6 @@ Item {
width: 600
height: 600
readonly property var assetsData: [
{
tokensKey: "stt_key",
communityId: "",
name: "Status Test Token",
currencyBalanceAsString: "42,23 USD",
symbol: "STT",
iconSource: Constants.tokenIcon("STT"),
balances: [
{
balanceAsString: "0,56",
iconUrl: "network/Network=Ethereum"
}
],
sectionText: "My assets on Mainnet"
},
{
tokensKey: "eth_key",
communityId: "",
name: "Ether",
currencyBalanceAsString: "4 276,86 USD",
symbol: "ETH",
iconSource: Constants.tokenIcon("ETH"),
balances: [
{
balanceAsString: "0,12",
iconUrl: "network/Network=Ethereum"
}
],
sectionText: "My assets on Mainnet"
},
{
tokensKey: "dai_key",
communityId: "",
name: "Dai Stablecoin",
currencyBalanceAsString: "45,92 USD",
symbol: "DAI",
iconSource: Constants.tokenIcon("DAI"),
balances: [],
sectionText: "Popular assets"
}
]
ListModel {
id: assetsModel
Component.onCompleted: append(assetsData)
}
Component {
id: selectorCmp
@ -73,7 +19,58 @@ Item {
id: selector
anchors.centerIn: parent
model: assetsModel
readonly property var assetsData: [
{
tokensKey: "stt_key",
communityId: "",
name: "Status Test Token",
currencyBalanceAsString: "42,23 USD",
symbol: "STT",
iconSource: Constants.tokenIcon("STT"),
balances: [
{
balanceAsString: "0,56",
iconUrl: "network/Network=Ethereum"
}
],
sectionName: "My assets on Mainnet"
},
{
tokensKey: "eth_key",
communityId: "",
name: "Ether",
currencyBalanceAsString: "4 276,86 USD",
symbol: "ETH",
iconSource: Constants.tokenIcon("ETH"),
balances: [
{
balanceAsString: "0,12",
iconUrl: "network/Network=Ethereum"
}
],
sectionName: "My assets on Mainnet"
},
{
tokensKey: "dai_key",
communityId: "",
name: "Dai Stablecoin",
currencyBalanceAsString: "45,92 USD",
symbol: "DAI",
iconSource: Constants.tokenIcon("DAI"),
balances: [],
sectionName: "Popular assets"
}
]
model: ListModel {
Component.onCompleted: append(selector.assetsData)
}
readonly property SignalSpy selectedSpy: SignalSpy {
target: selector
@ -89,8 +86,6 @@ Item {
function test_basic() {
const selector = createTemporaryObject(selectorCmp, root)
selector.nonInteractiveKey = "eth_key"
selector.sectionProperty = "sectionText"
compare(selector.isSelected, false)
waitForRendering(selector)
@ -102,7 +97,6 @@ Item {
const panel = findChild(selector.Overlay.overlay, "searchableAssetsPanel")
compare(panel.model, selector.model)
compare(panel.nonInteractiveKey, selector.nonInteractiveKey)
compare(panel.sectionProperty, selector.sectionProperty)
}
function test_basicSelection() {
@ -121,7 +115,7 @@ Item {
const listView = findChild(selector.Overlay.overlay, "assetsListView")
verify(listView)
compare(listView.count, root.assetsData.length)
compare(listView.count, selector.assetsData.length)
waitForRendering(listView)
const delegate1 = listView.itemAtIndex(0)
@ -196,7 +190,7 @@ Item {
waitForRendering(selector)
const imageUrl = Constants.tokenIcon("DAI")
selector.setCustom("Custom", imageUrl, "custom_key")
selector.setSelection("Custom", imageUrl, "custom_key")
compare(selector.isSelected, true)
compare(selector.selectedSpy.count, 0)

145
storybook/qmlTests/tests/tst_SearchableAssetsPanel.qml
View File

@ -19,7 +19,58 @@ Item {
SearchableAssetsPanel {
id: panel
sectionProperty: "sectionText"
readonly property var assetsData: [
{
tokensKey: "stt_key",
communityId: "",
name: "Status Test Token",
currencyBalanceAsString: "42,23 USD",
symbol: "STT",
iconSource: Constants.tokenIcon("STT"),
balances: [
{
balanceAsString: "0,56",
iconUrl: "network/Network=Ethereum"
},
{
balanceAsString: "0,22",
iconUrl: "network/Network=Arbitrum"
},
{
balanceAsString: "0,12",
iconUrl: "network/Network=Optimism"
}
],
sectionName: ""
},
{
tokensKey: "dai_key",
communityId: "",
name: "Dai Stablecoin",
currencyBalanceAsString: "45,92 USD",
symbol: "DAI",
iconSource: Constants.tokenIcon("DAI"),
balances: [],
sectionName: "Popular assets"
},
{
tokensKey: "zrx_key",
communityId: "",
name: "0x",
currencyBalanceAsString: "41,22 USD",
symbol: "ZRX",
iconSource: Constants.tokenIcon("ZRX"),
balances: [],
sectionName: "Popular assets"
}
]
model: ListModel {
Component.onCompleted: append(panel.assetsData)
}
readonly property SignalSpy selectedSpy: SignalSpy {
target: panel
@ -28,67 +79,12 @@ Item {
}
}
readonly property var assetsData: [
{
tokensKey: "stt_key",
communityId: "",
name: "Status Test Token",
currencyBalanceAsString: "42,23 USD",
symbol: "STT",
iconSource: Constants.tokenIcon("STT"),
balances: [
{
balanceAsString: "0,56",
iconUrl: "network/Network=Ethereum"
},
{
balanceAsString: "0,22",
iconUrl: "network/Network=Arbitrum"
},
{
balanceAsString: "0,12",
iconUrl: "network/Network=Optimism"
}
],
sectionText: ""
},
{
tokensKey: "dai_key",
communityId: "",
name: "Dai Stablecoin",
currencyBalanceAsString: "45,92 USD",
symbol: "DAI",
iconSource: Constants.tokenIcon("DAI"),
balances: [],
sectionText: "Popular assets"
},
{
tokensKey: "zrx_key",
communityId: "",
name: "0x",
currencyBalanceAsString: "41,22 USD",
symbol: "ZRX",
iconSource: Constants.tokenIcon("ZRX"),
balances: [],
sectionText: "Popular assets"
}
]
ListModel {
id: model
Component.onCompleted: append(root.assetsData)
}
TestCase {
name: "SearchableAssetsPanel"
when: windowShown
function test_sections() {
const control = createTemporaryObject(panelCmp, root, { model })
const control = createTemporaryObject(panelCmp, root)
const listView = findChild(control, "assetsListView")
waitForRendering(listView)
@ -109,9 +105,36 @@ Item {
const sectionDelegate = TestUtils.findTextItem(listView, "Popular assets")
verify(sectionDelegate)
}
control.sectionProperty = ""
function test_withNoSectionsModel() {
const model = createTemporaryQmlObject("import QtQuick 2.15; ListModel {}", root)
const control = createTemporaryObject(panelCmp, root, { model })
model.append(control.assetsData.map(
e => ({
tokensKey: e.tokensKey,
communityId: e.communityId,
name: e.name,
currencyBalanceAsString: e.currencyBalanceAsString,
symbol: e.symbol,
iconSource: e.iconSource,
balances: e.balances
})
)
)
const listView = findChild(control, "assetsListView")
waitForRendering(listView)
compare(listView.count, 3)
const delegate1 = listView.itemAtIndex(0)
const delegate2 = listView.itemAtIndex(1)
const delegate3 = listView.itemAtIndex(2)
verify(delegate1)
verify(delegate2)
verify(delegate3)
compare(delegate1.ListView.section, "")
compare(delegate2.ListView.section, "")
@ -119,7 +142,7 @@ Item {
}
function test_search() {
const control = createTemporaryObject(panelCmp, root, { model })
const control = createTemporaryObject(panelCmp, root)
const listView = findChild(control, "assetsListView")
waitForRendering(listView)
@ -154,7 +177,7 @@ Item {
}
function test_highlightedKey() {
const control = createTemporaryObject(panelCmp, root, { model })
const control = createTemporaryObject(panelCmp, root)
control.highlightedKey = "dai_key"
const listView = findChild(control, "assetsListView")
@ -176,7 +199,7 @@ Item {
}
function test_nonInteractiveKey() {
const control = createTemporaryObject(panelCmp, root, { model })
const control = createTemporaryObject(panelCmp, root)
control.nonInteractiveKey = "dai_key"
const listView = findChild(control, "assetsListView")

4
ui/app/AppLayouts/Wallet/controls/AssetSelector.qml
View File

@ -15,13 +15,11 @@ Control {
property alias model: searchableAssetsPanel.model
property alias nonInteractiveKey: searchableAssetsPanel.nonInteractiveKey
property alias sectionProperty: searchableAssetsPanel.sectionProperty
readonly property bool isSelected: button.selected
signal selected(string key)
function setCustom(name: string, icon: url, key: string) {
function setSelection(name: string, icon: url, key: string) {
button.name = name
button.icon = icon
button.selected = true

6
ui/app/AppLayouts/Wallet/controls/AssetSelectorCompact.qml
View File

@ -14,13 +14,11 @@ Control {
/** Expected model structure: see SearchableAssetsPanel::model **/
property alias model: searchableAssetsPanel.model
property alias sectionProperty: searchableAssetsPanel.sectionProperty
readonly property bool isSelected: button.selected
signal selected(string key)
function setCustom(name: string, symbol: string, icon: url, key: string) {
function setSelection(name: string, symbol: string, icon: url, key: string) {
button.name = name
button.subname = symbol
button.icon = icon
@ -71,5 +69,7 @@ Control {
root.selected(key)
}
}
onClosed: searchableAssetsPanel.clearSearch()
}
}

15
ui/app/AppLayouts/Wallet/controls/TokenSelector.qml
View File

@ -17,7 +17,7 @@ Control {
/** Expected model structure: see SearchableCollectiblesPanel::model **/
property alias collectiblesModel: tokenSelectorPanel.collectiblesModel
readonly property bool isTokenSelected: d.isTokenSelected
readonly property bool isTokenSelected: tokenSelectorButton.selected
signal assetSelected(string key)
signal collectionSelected(string key)
@ -27,23 +27,16 @@ Control {
// TokensSelectorPanel.Tabs enum values.
property alias currentTab: tokenSelectorPanel.currentTab
function setCustom(name: string, icon: url, key: string) {
d.isTokenSelected = true
function setSelection(name: string, icon: url, key: string) {
tokenSelectorButton.selected = true
tokenSelectorButton.name = name
tokenSelectorButton.icon = icon
tokenSelectorPanel.highlightedKey = key ?? ""
}
QtObject {
id: d
property bool isTokenSelected: false
}
contentItem: TokenSelectorButton {
id: tokenSelectorButton
selected: d.isTokenSelected
forceHovered: dropdown.opened
onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
@ -79,7 +72,7 @@ Control {
function setCurrentAndClose(name, icon) {
tokenSelectorButton.name = name
tokenSelectorButton.icon = icon
d.isTokenSelected = true
tokenSelectorButton.selected = true
dropdown.close()
}

5
ui/app/AppLayouts/Wallet/panels/SearchableAssetsPanel.qml
View File

@ -27,13 +27,12 @@ Control {
balances [model] - submodel of balances per chain
balanceAsString [string] - formatted balance per chain
iconUrl [url] - chain's icon
sectionName (optional) [string] - text to be rendered as a section
**/
property alias model: sfpm.sourceModel
property string highlightedKey
property string nonInteractiveKey
property string sectionProperty
signal selected(string key)
function clearSearch() {
@ -84,7 +83,7 @@ Control {
Layout.preferredHeight: contentHeight
model: sfpm
section.property: root.sectionProperty
section.property: "sectionName"
section.delegate: TokenSelectorSectionDelegate {
width: ListView.view.width

5
ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml
View File

@ -95,7 +95,6 @@ ColumnLayout {
Layout.fillWidth: true
model: root.assetsModel
sectionProperty: "sectionName"
onSelected: root.tokenSelected(key)
@ -108,8 +107,8 @@ ColumnLayout {
const entry = ModelUtils.getByKey(root.assetsModel,
"tokensKey", root.selectedTokenKey)
if (entry) {
assetSelector.setCustom(entry.name, entry.symbol,
entry.iconSource, entry.tokensKey)
assetSelector.setSelection(entry.name, entry.symbol,
entry.iconSource, entry.tokensKey)
root.tokenSelected(entry.tokensKey)
} else {
assetSelector.reset()

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

@ -53,7 +53,7 @@ Control {
if (entry) {
holdingSelector.currentTokensKey = root.tokenKey
holdingSelector.setCustom(entry.symbol, entry.iconSource, entry.tokensKey)
holdingSelector.setSelection(entry.symbol, entry.iconSource, entry.tokensKey)
} else {
holdingSelector.currentTokensKey = ""
holdingSelector.reset()
@ -267,8 +267,6 @@ Control {
model: d.adaptor.outputAssetsModel
nonInteractiveKey: root.nonInteractiveTokensKey
sectionProperty: "sectionName"
onSelected: currentTokensKey = key
}

4
ui/app/AppLayouts/Wallet/panels/TokenSelectorPanel.qml
View File

@ -80,6 +80,8 @@ Control {
Layout.fillWidth: true
Layout.fillHeight: true
highlightedKey: root.highlightedKey
onSelected: root.assetSelected(key)
}
@ -91,6 +93,8 @@ Control {
Layout.fillWidth: true
Layout.fillHeight: true
highlightedKey: root.highlightedKey
onCollectibleSelected: root.collectibleSelected(key)
onCollectionSelected: root.collectionSelected(key)
}

10
ui/imports/shared/popups/send/SendModal.qml
View File

@ -229,8 +229,8 @@ StatusDialog {
d.selectedHoldingType = Constants.TokenType.ERC20
d.selectedHolding = entry
holdingSelector.setCustom(entry.symbol, entry.iconSource,
popup.preSelectedHoldingID)
holdingSelector.setSelection(entry.symbol, entry.iconSource,
popup.preSelectedHoldingID)
holdingSelector.selectedItem = entry
} else {
const entry = SQUtils.ModelUtils.getByKey(
@ -242,9 +242,9 @@ StatusDialog {
const id = entry.communityId ? entry.collectionUid : entry.uid
holdingSelector.setCustom(entry.name,
entry.imageUrl || entry.mediaUrl,
id)
holdingSelector.setSelection(entry.name,
entry.imageUrl || entry.mediaUrl,
id)
holdingSelector.selectedItem = entry
holdingSelector.currentTab = TokenSelectorPanel.Tabs.Collectibles
}