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

AssetSelector added 

This component is simpler version of TokenSelector, composed of the same
basic componets, useful when only assets are subject of selection.

Closes: #16234
This commit is contained in:
Michał Cieślak 2024-09-02 11:35:18 +02:00 committed by Michał
parent 01a24e1b19
commit d82499fd7b
8 changed files with 220 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
storybook/pages/AssetSelectorPage.qml Normal file
View File

@ -0,0 +1,105 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import AppLayouts.Wallet.controls 1.0
import StatusQ.Core.Theme 0.1
import utils 1.0
Pane {
readonly property var assetsData: [
{
tokensKey: "key_1",
communityId: "",
name: "Status Test Token",
currencyBalanceAsString: "42,23 USD",
symbol: "STT",
iconSource: Constants.tokenIcon("STT"),
tokensKey: "STT",
balances: [
{
balanceAsString: "0,56",
iconUrl: "network/Network=Ethereum"
},
{
balanceAsString: "0,22",
iconUrl: "network/Network=Arbitrum"
},
{
balanceAsString: "0,12",
iconUrl: "network/Network=Optimism"
}
]
},
{
tokensKey: "key_2",
communityId: "",
name: "Ether",
currencyBalanceAsString: "4 276,86 USD",
symbol: "ETH",
iconSource: Constants.tokenIcon("ETH"),
tokensKey: "ETH",
balances: [
{
balanceAsString: "1,01",
iconUrl: "network/Network=Optimism"
},
{
balanceAsString: "0,47",
iconUrl: "network/Network=Arbitrum"
},
{
balanceAsString: "0,12",
iconUrl: "network/Network=Ethereum"
}
]
},
{
tokensKey: "key_2",
communityId: "",
name: "Dai Stablecoin",
currencyBalanceAsString: "45,92 USD",
symbol: "DAI",
iconSource: Constants.tokenIcon("DAI"),
tokensKey: "DAI",
balances: [
{
balanceAsString: "45,12",
iconUrl: "network/Network=Arbitrum"
},
{
balanceAsString: "0,56",
iconUrl: "network/Network=Optimism"
},
{
balanceAsString: "0,12",
iconUrl: "network/Network=Ethereum"
}
]
}
]
ListModel {
id: assetsModel
Component.onCompleted: append(assetsData)
}
background: Rectangle {
color: Theme.palette.baseColor3
}
AssetSelector {
id: panel
anchors.centerIn: parent
assetsModel: assetsModel
onAssetSelected: console.log("asset selected:", key)
}
}
// category: Controls

24
storybook/pages/TokenSelectorNewPage.qml
View File

@ -1,5 +1,6 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import AppLayouts.Wallet.controls 1.0
import StatusQ.Core.Theme 0.1
@ -175,13 +176,32 @@ Pane {
anchors.centerIn: parent
assetsModel: assetsModel
collectiblesModel: collectiblesModel
assetsModel: assetsModelCheckBox.checked ? assetsModel : null
collectiblesModel: collectiblesModelCheckBox.checked ? collectiblesModel : null
onCollectibleSelected: console.log("collectible selected:", key)
onCollectionSelected: console.log("collection selected:", key)
onAssetSelected: console.log("asset selected:", key)
}
RowLayout {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
CheckBox {
id: assetsModelCheckBox
checked: true
text: "Assets model assigned"
}
CheckBox {
id: collectiblesModelCheckBox
checked: true
text: "Collectibles model assigned"
}
}
}
// category: Controls

72
ui/app/AppLayouts/Wallet/controls/AssetSelector.qml Normal file
View File

@ -0,0 +1,72 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import StatusQ.Controls 0.1
import StatusQ.Core.Utils 0.1
import AppLayouts.Wallet.panels 1.0
import utils 1.0
Control {
id: root
/** Expected model structure: see SearchableAssetsPanel::model **/
property alias assetsModel: searchableAssetsPanel.model
readonly property bool isTokenSelected: d.isTokenSelected
signal assetSelected(string key)
function setCustom(name: string, icon: url, key: string) {
d.isTokenSelected = true
tokenSelectorButton.name = name
tokenSelectorButton.icon = icon
searchableAssetsPanel.highlightedKey = key ?? ""
}
QtObject {
id: d
property bool isTokenSelected: false
}
contentItem: TokenSelectorButton {
id: tokenSelectorButton
selected: d.isTokenSelected
forceHovered: dropdown.opened
text: qsTr("Select asset")
onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
}
StatusDropdown {
id: dropdown
y: parent.height + 4
closePolicy: Popup.CloseOnPressOutsideParent
padding: 0
contentItem: SearchableAssetsPanel {
id: searchableAssetsPanel
function setCurrentAndClose(name, icon) {
tokenSelectorButton.name = name
tokenSelectorButton.icon = icon
d.isTokenSelected = true
dropdown.close()
}
onSelected: {
const entry = ModelUtils.getByKey(assetsModel, "tokensKey", key)
highlightedKey = key
setCurrentAndClose(entry.symbol, entry.iconSource)
root.assetSelected(key)
}
}
}
}

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

@ -15,6 +15,8 @@ Control {
property bool selected
property bool forceHovered
property string text: qsTr("Select token")
property string name
property url icon
@ -49,7 +51,7 @@ Control {
font.pixelSize: root.font.pixelSize
font.weight: Font.Medium
color: Theme.palette.primaryColor1
text: qsTr("Select token")
text: root.text
}
StatusComboboxIndicator {

17
ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml
View File

@ -29,8 +29,8 @@ Control {
function setCustom(name: string, icon: url, key: string) {
d.isTokenSelected = true
d.currentName = name
d.currentIcon = icon
tokenSelectorButton.name = name
tokenSelectorButton.icon = icon
tokenSelectorPanel.highlightedKey = key ?? ""
}
@ -38,18 +38,14 @@ Control {
id: d
property bool isTokenSelected: false
property string currentName
property url currentIcon
}
contentItem: TokenSelectorButton {
id: tokenSelectorButton
selected: d.isTokenSelected
forceHovered: dropdown.opened
name: d.currentName
icon: d.currentIcon
onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
}
@ -59,6 +55,7 @@ Control {
y: parent.height + 4
closePolicy: Popup.CloseOnPressOutsideParent
horizontalPadding: 0
bottomPadding: 0
contentItem: TokenSelectorPanel {
@ -79,8 +76,8 @@ Control {
}
function setCurrentAndClose(name, icon) {
d.currentName = name
d.currentIcon = icon
tokenSelectorButton.name = name
tokenSelectorButton.icon = icon
d.isTokenSelected = true
dropdown.close()
}

7
ui/app/AppLayouts/Wallet/controls/qmldir
View File

@ -1,5 +1,8 @@
AccountHeaderGradient 1.0 AccountHeaderGradient.qml
ActivityFilterTagItem 1.0 ActivityFilterTagItem.qml
AssetSelector 1.0 AssetSelector.qml
BuyCryptoProvidersDelegate 1.0 BuyCryptoProvidersDelegate.qml
BuyCryptoProvidersLoadingDelegate 1.0 BuyCryptoProvidersLoadingDelegate.qml
CollectibleBalanceTag 1.0 CollectibleBalanceTag.qml
CollectibleLinksTags 1.0 CollectibleLinksTags.qml
DappsComboBox 1.0 DappsComboBox.qml
@ -18,9 +21,7 @@ StatusDateRangePicker 1.0 StatusDateRangePicker.qml
StatusNetworkListItemTag 1.0 StatusNetworkListItemTag.qml
StatusTxProgressBar 1.0 StatusTxProgressBar.qml
SwapExchangeButton 1.0 SwapExchangeButton.qml
SwapProvidersTermsAndConditionsText 1.0 SwapProvidersTermsAndConditionsText.qml
TokenSelector 1.0 TokenSelector.qml
TokenSelectorButton 1.0 TokenSelectorButton.qml
TokenSelectorNew 1.0 TokenSelectorNew.qml
SwapProvidersTermsAndConditionsText 1.0 SwapProvidersTermsAndConditionsText.qml
BuyCryptoProvidersDelegate 1.0 BuyCryptoProvidersDelegate.qml
BuyCryptoProvidersLoadingDelegate 1.0 BuyCryptoProvidersLoadingDelegate.qml

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

@ -123,9 +123,12 @@ Control {
section.property: "type"
section.delegate: StatusBaseText {
width: ListView.view.width
color: Theme.palette.baseColor1
topPadding: Style.current.padding
padding: Style.current.padding
bottomPadding: 0
elide: Text.ElideRight
text: section === "community"
? qsTr("Community minted")
: qsTr("Other")

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

@ -1,8 +1,9 @@
import shared.controls 1.0
SearchBox {
input.leftPadding: 0
input.rightPadding: 0
input.leftPadding: 14
input.rightPadding: 14
minimumHeight: 56
maximumHeight: 56
input.showBackground: false