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

feat(@desktop/wallet): Update the token selector in SendModal 

fixes #8713
This commit is contained in:
Khushboo Mehta 2022-12-16 09:50:56 +01:00 committed by Khushboo-dev-cpp
parent eb2ec7c1af
commit 5f55cd2be9
6 changed files with 96 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
View File

@ -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

5
ui/imports/shared/controls/AssetAndAmountInput.qml
View File

@ -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
View 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
}
}
}

97
ui/imports/shared/panels/StatusAssetSelector.qml
View File

@ -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()
}
}

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

@ -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

14
ui/imports/shared/views/TokenListView.qml
View File

@ -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 {