mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-16 01:27:01 +00:00
feat(@desktop/wallet): Update the token selector in SendModal
fixes #8713
This commit is contained in:
Khushboo Mehta
Khushboo-dev-cpp
parent
eb2ec7c1af
commit
5f55cd2be9
@ -77,6 +77,7 @@ Rectangle {
|
||||
property alias statusListItemComponentsSlot: statusListItemComponentsSlot
|
||||
property alias statusListItemTagsSlot: statusListItemTagsSlot
|
||||
property alias statusListItemInlineTagsSlot: statusListItemTagsSlotInline
|
||||
property alias statusListItemLabel: statusListItemLabel
|
||||
|
||||
signal clicked(string itemId, var mouse)
|
||||
signal titleClicked(string titleId)
|
||||
@ -361,16 +362,16 @@ Rectangle {
|
||||
ScrollView {
|
||||
visible: tagsRepeater.count > 0
|
||||
anchors.top: statusListItemTertiaryTitle.bottom
|
||||
anchors.topMargin: visible? 8 : 0
|
||||
anchors.topMargin: visible ? 8 : 0
|
||||
width: parent.width
|
||||
height: visible? contentHeight + 12 : contentHeight
|
||||
height: visible ? contentHeight : 0
|
||||
clip: true
|
||||
|
||||
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
|
||||
|
||||
Row {
|
||||
id: statusListItemTagsSlotInline
|
||||
spacing: 10
|
||||
spacing: tagsRepeater.count > 0 ? 10 : 0
|
||||
|
||||
Repeater {
|
||||
id: tagsRepeater
|
||||
|
||||
@ -30,6 +30,7 @@ Item {
|
||||
property bool isValid: false
|
||||
property string validationError
|
||||
property var formattedInputValue
|
||||
property var getNetworkIcon: function(chainId){ return ""}
|
||||
|
||||
height: inputAmount.height + (inputAmount.validationError ? -16 - inputAmount.validationErrorTopMargin : 0) + txtFiatBalance.height + txtFiatBalance.anchors.topMargin
|
||||
anchors.right: parent.right
|
||||
@ -166,9 +167,6 @@ Item {
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.current.smallPadding
|
||||
defaultToken: Style.png("tokens/DEFAULT-TOKEN@3x")
|
||||
getCurrencyBalanceString: function (currencyBalance) {
|
||||
return Utils.toLocaleString(currencyBalance.toFixed(2), RootStore.locale, {"currency": true}) + " " + root.currentCurrency.toUpperCase()
|
||||
}
|
||||
tokenAssetSourceFn: function (symbol) {
|
||||
return symbol ? Style.png("tokens/" + symbol) : defaultToken
|
||||
}
|
||||
@ -178,6 +176,7 @@ Item {
|
||||
}
|
||||
return ""
|
||||
}
|
||||
getNetworkIcon: root.getNetworkIcon
|
||||
onSelectedAssetChanged: {
|
||||
if (!selectAsset.selectedAsset) {
|
||||
return
|
||||
|
||||
55
ui/imports/shared/controls/TokenBalancePerChainDelegate.qml
Normal file
55
ui/imports/shared/controls/TokenBalancePerChainDelegate.qml
Normal file
@ -0,0 +1,55 @@
|
||||
import QtQuick 2.13
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import utils 1.0
|
||||
|
||||
StatusListItem {
|
||||
id: root
|
||||
|
||||
property string currentCurrencySymbol
|
||||
property var getNetworkIcon: function(chainId){
|
||||
return ""
|
||||
}
|
||||
signal tokenSelected(var selectedToken)
|
||||
|
||||
title: name
|
||||
label: enabledNetworkCurrencyBalance.toLocaleCurrencyString(Qt.locale(), root.currentCurrencySymbol)
|
||||
asset.name: symbol ? Style.png("tokens/" + symbol) : ""
|
||||
asset.isImage: true
|
||||
asset.width: 32
|
||||
asset.height: 32
|
||||
statusListItemLabel.color: Theme.palette.directColor1
|
||||
statusListItemInlineTagsSlot.spacing: sensor.containsMouse ? 0 : -8
|
||||
tagsModel: balances.count > 0 ? balances : []
|
||||
tagsDelegate: sensor.containsMouse ? expandedItem : compactItem
|
||||
|
||||
onClicked: tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals})
|
||||
|
||||
Component {
|
||||
id: compactItem
|
||||
StatusRoundedImage {
|
||||
z: index + 1
|
||||
width: 16
|
||||
height: 16
|
||||
image.source: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
|
||||
visible: balance > 0
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: expandedItem
|
||||
StatusListItemTag {
|
||||
height: 16
|
||||
title: balance
|
||||
titleText.font.pixelSize: 12
|
||||
closeButtonVisible: false
|
||||
bgColor: "transparent"
|
||||
asset.width: 16
|
||||
asset.height: 16
|
||||
asset.isImage: true
|
||||
asset.name: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
|
||||
visible: balance > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -14,23 +14,29 @@ import StatusQ.Core.Backpressure 1.0
|
||||
import shared.controls 1.0
|
||||
import utils 1.0
|
||||
|
||||
import utils 1.0
|
||||
|
||||
import "../controls"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property var assets
|
||||
property var selectedAsset
|
||||
property string defaultToken: ""
|
||||
property string userSelectedToken: ""
|
||||
property string defaultToken
|
||||
property string userSelectedToken
|
||||
property string currentCurrencySymbol
|
||||
property string placeholderText
|
||||
|
||||
property var tokenAssetSourceFn: function (symbol) {
|
||||
return ""
|
||||
}
|
||||
property var searchTokenSymbolByAddressFn: function (address) {
|
||||
return ""
|
||||
}
|
||||
|
||||
// Define this in the usage to get balance in currency selected by user
|
||||
property var getCurrencyBalanceString: function (currencyBalance) { return "" }
|
||||
property string placeholderText
|
||||
property var getNetworkIcon: function(chainId){
|
||||
return ""
|
||||
}
|
||||
|
||||
function resetInternal() {
|
||||
assets = null
|
||||
@ -66,9 +72,9 @@ Item {
|
||||
height: 34
|
||||
|
||||
control.padding: 4
|
||||
control.popup.width: 342
|
||||
control.popup.width: 492
|
||||
control.popup.height: 416
|
||||
control.popup.x: width - control.popup.width
|
||||
control.popup.x: -root.x
|
||||
|
||||
popupContentItemObjectName: "assetSelectorList"
|
||||
|
||||
@ -140,74 +146,15 @@ Item {
|
||||
|
||||
control.indicator: null
|
||||
|
||||
delegate: StatusItemDelegate {
|
||||
width: comboBox.control.popup.width
|
||||
highlighted: index === comboBox.control.highlightedIndex
|
||||
padding: 16
|
||||
delegate: TokenBalancePerChainDelegate {
|
||||
objectName: "AssetSelector_ItemDelegate_" + symbol
|
||||
onClicked: {
|
||||
// WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info.
|
||||
root.userSelectedToken = symbol
|
||||
root.selectedAsset = {name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances, decimals: decimals}
|
||||
}
|
||||
|
||||
// WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info.
|
||||
Component.onCompleted: {
|
||||
if (symbol === userSelectedToken)
|
||||
root.selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances, decimals: decimals}
|
||||
}
|
||||
|
||||
contentItem: RowLayout {
|
||||
spacing: 0
|
||||
|
||||
StatusRoundedImage {
|
||||
image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
|
||||
image.onStatusChanged: {
|
||||
if (image.status === Image.Error) {
|
||||
image.source = defaultToken
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: 12
|
||||
spacing: 0
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
StatusBaseText {
|
||||
Layout.fillWidth: true
|
||||
text: symbol.toUpperCase()
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.fillWidth: true
|
||||
horizontalAlignment: Text.AlignRight
|
||||
font.pixelSize: 15
|
||||
text: parseFloat(totalBalance).toLocaleCurrencyString(Qt.locale(), symbol)
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
StatusBaseText {
|
||||
Layout.fillWidth: true
|
||||
elide: Text.ElideRight
|
||||
text: name
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 15
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.fillWidth: true
|
||||
horizontalAlignment: Text.AlignRight
|
||||
font.pixelSize: 15
|
||||
text: getCurrencyBalanceString(totalCurrencyBalance)
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
}
|
||||
width: comboBox.control.popup.width
|
||||
currentCurrencySymbol: root.currentCurrencySymbol
|
||||
getNetworkIcon: root.getNetworkIcon
|
||||
onTokenSelected: {
|
||||
userSelectedToken = selectedToken.symbol
|
||||
selectedAsset = selectedToken
|
||||
comboBox.control.popup.close()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -220,9 +220,7 @@ StatusDialog {
|
||||
assets: popup.selectedAccount && popup.selectedAccount.assets ? popup.selectedAccount.assets : []
|
||||
defaultToken: Style.png("tokens/DEFAULT-TOKEN@3x")
|
||||
placeholderText: qsTr("Select token")
|
||||
getCurrencyBalanceString: function (currencyBalance) {
|
||||
return "%1 %2".arg(Utils.toLocaleString(currencyBalance.toFixed(2), popup.store.locale, {"currency": true})).arg(popup.store.currentCurrency.toUpperCase())
|
||||
}
|
||||
currentCurrencySymbol: RootStore.currencyStore.currentCurrencySymbol
|
||||
tokenAssetSourceFn: function (symbol) {
|
||||
return symbol ? Style.png("tokens/%1".arg(symbol)) : defaultToken
|
||||
}
|
||||
@ -232,6 +230,9 @@ StatusDialog {
|
||||
}
|
||||
return ""
|
||||
}
|
||||
getNetworkIcon: function(chainId){
|
||||
return RootStore.getNetworkIcon(chainId)
|
||||
}
|
||||
onSelectedAssetChanged: {
|
||||
if (!assetSelector.selectedAsset || !amountToSendInput.input.text || isNaN(amountToSendInput.input.text)) {
|
||||
return
|
||||
@ -293,6 +294,9 @@ StatusDialog {
|
||||
}
|
||||
return ""
|
||||
}
|
||||
getNetworkIcon: function(chainId){
|
||||
return RootStore.getNetworkIcon(chainId)
|
||||
}
|
||||
onTokenSelected: {
|
||||
assetSelector.userSelectedToken = selectedToken.symbol
|
||||
assetSelector.selectedAsset = selectedToken
|
||||
|
||||
@ -5,6 +5,7 @@ import SortFilterProxyModel 0.2
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
import utils 1.0
|
||||
|
||||
@ -19,6 +20,7 @@ Rectangle {
|
||||
property var searchTokenSymbolByAddressFn: function (address) {
|
||||
return ""
|
||||
}
|
||||
property var getNetworkIcon: function(chainId){}
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
@ -52,15 +54,11 @@ Rectangle {
|
||||
}
|
||||
]
|
||||
}
|
||||
delegate: TokenDelegate {
|
||||
objectName: "SendModal_AssetView_TokenListItem_" + symbol
|
||||
readonly property string balance: enabledNetworkBalance // Needed for the tests
|
||||
currentCurrencySymbol: root.currentCurrencySymbol
|
||||
delegate: TokenBalancePerChainDelegate {
|
||||
width: ListView.view.width
|
||||
onClicked: {
|
||||
tokenSelected({name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances, decimals: decimals})
|
||||
}
|
||||
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
|
||||
currentCurrencySymbol: root.currentCurrencySymbol
|
||||
getNetworkIcon: root.getNetworkIcon
|
||||
onTokenSelected: root.tokenSelected(selectedToken)
|
||||
}
|
||||
headerPositioning: ListView.OverlayHeader
|
||||
header: Rectangle {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user