diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index 35129be61a..2326d11caa 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -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 diff --git a/ui/imports/shared/controls/AssetAndAmountInput.qml b/ui/imports/shared/controls/AssetAndAmountInput.qml index 7bc03c3661..8e7201ff45 100644 --- a/ui/imports/shared/controls/AssetAndAmountInput.qml +++ b/ui/imports/shared/controls/AssetAndAmountInput.qml @@ -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 diff --git a/ui/imports/shared/controls/TokenBalancePerChainDelegate.qml b/ui/imports/shared/controls/TokenBalancePerChainDelegate.qml new file mode 100644 index 0000000000..90c8ef11a0 --- /dev/null +++ b/ui/imports/shared/controls/TokenBalancePerChainDelegate.qml @@ -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 + } + } +} diff --git a/ui/imports/shared/panels/StatusAssetSelector.qml b/ui/imports/shared/panels/StatusAssetSelector.qml index 6cc5fe14e6..7589a77350 100644 --- a/ui/imports/shared/panels/StatusAssetSelector.qml +++ b/ui/imports/shared/panels/StatusAssetSelector.qml @@ -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() } } diff --git a/ui/imports/shared/popups/SendModal.qml b/ui/imports/shared/popups/SendModal.qml index fcbe430b58..4794c8da15 100644 --- a/ui/imports/shared/popups/SendModal.qml +++ b/ui/imports/shared/popups/SendModal.qml @@ -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 diff --git a/ui/imports/shared/views/TokenListView.qml b/ui/imports/shared/views/TokenListView.qml index 0db8037fb6..5734a1d7a8 100644 --- a/ui/imports/shared/views/TokenListView.qml +++ b/ui/imports/shared/views/TokenListView.qml @@ -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 {