diff --git a/storybook/pages/AssetSelectorCompactPage.qml b/storybook/pages/AssetSelectorCompactPage.qml index a61555166d..408cb72b8d 100644 --- a/storybook/pages/AssetSelectorCompactPage.qml +++ b/storybook/pages/AssetSelectorCompactPage.qml @@ -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) } diff --git a/storybook/pages/AssetSelectorPage.qml b/storybook/pages/AssetSelectorPage.qml index 979b4226b6..5914bb7ccf 100644 --- a/storybook/pages/AssetSelectorPage.qml +++ b/storybook/pages/AssetSelectorPage.qml @@ -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) } diff --git a/storybook/pages/SearchableAssetsPanelPage.qml b/storybook/pages/SearchableAssetsPanelPage.qml index dce74c812b..679a7a37f1 100644 --- a/storybook/pages/SearchableAssetsPanelPage.qml +++ b/storybook/pages/SearchableAssetsPanelPage.qml @@ -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) } diff --git a/storybook/qmlTests/tests/tst_AssetSelector.qml b/storybook/qmlTests/tests/tst_AssetSelector.qml index 1f4208883e..714822e054 100644 --- a/storybook/qmlTests/tests/tst_AssetSelector.qml +++ b/storybook/qmlTests/tests/tst_AssetSelector.qml @@ -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) diff --git a/storybook/qmlTests/tests/tst_SearchableAssetsPanel.qml b/storybook/qmlTests/tests/tst_SearchableAssetsPanel.qml index 7281a6ce4e..0019b9fa89 100644 --- a/storybook/qmlTests/tests/tst_SearchableAssetsPanel.qml +++ b/storybook/qmlTests/tests/tst_SearchableAssetsPanel.qml @@ -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") diff --git a/ui/app/AppLayouts/Wallet/controls/AssetSelector.qml b/ui/app/AppLayouts/Wallet/controls/AssetSelector.qml index a1465a0089..66c60bf339 100644 --- a/ui/app/AppLayouts/Wallet/controls/AssetSelector.qml +++ b/ui/app/AppLayouts/Wallet/controls/AssetSelector.qml @@ -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 diff --git a/ui/app/AppLayouts/Wallet/controls/AssetSelectorCompact.qml b/ui/app/AppLayouts/Wallet/controls/AssetSelectorCompact.qml index fc9a4c9005..12ff747ad8 100644 --- a/ui/app/AppLayouts/Wallet/controls/AssetSelectorCompact.qml +++ b/ui/app/AppLayouts/Wallet/controls/AssetSelectorCompact.qml @@ -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() } } diff --git a/ui/app/AppLayouts/Wallet/controls/TokenSelector.qml b/ui/app/AppLayouts/Wallet/controls/TokenSelector.qml index f40f166059..1503138855 100644 --- a/ui/app/AppLayouts/Wallet/controls/TokenSelector.qml +++ b/ui/app/AppLayouts/Wallet/controls/TokenSelector.qml @@ -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() } diff --git a/ui/app/AppLayouts/Wallet/panels/SearchableAssetsPanel.qml b/ui/app/AppLayouts/Wallet/panels/SearchableAssetsPanel.qml index ef7929b55f..d783be3483 100644 --- a/ui/app/AppLayouts/Wallet/panels/SearchableAssetsPanel.qml +++ b/ui/app/AppLayouts/Wallet/panels/SearchableAssetsPanel.qml @@ -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 diff --git a/ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml b/ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml index 54aed1cff3..e9e4d83490 100644 --- a/ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml +++ b/ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml @@ -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() diff --git a/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml b/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml index 994da0e3f9..48af4a06c1 100644 --- a/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml +++ b/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml @@ -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 } diff --git a/ui/app/AppLayouts/Wallet/panels/TokenSelectorPanel.qml b/ui/app/AppLayouts/Wallet/panels/TokenSelectorPanel.qml index 1459c00065..7e3a3351a5 100644 --- a/ui/app/AppLayouts/Wallet/panels/TokenSelectorPanel.qml +++ b/ui/app/AppLayouts/Wallet/panels/TokenSelectorPanel.qml @@ -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) } diff --git a/ui/imports/shared/popups/send/SendModal.qml b/ui/imports/shared/popups/send/SendModal.qml index ded0184898..7a01fd389f 100644 --- a/ui/imports/shared/popups/send/SendModal.qml +++ b/ui/imports/shared/popups/send/SendModal.qml @@ -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 }