mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-10 22:36:24 +00:00
8b4cbc59a8
The new account selector expects a generic account model. It will display all the account data if provided, including preferred chains, balance or asset balance. Otherwise it will display only the available data. The account selector can receive an initial selection based on account address and will provide the current selected address and the current selected model item. - Unify the account selector between communities and wallet - Update the account selector to work with addresses instead of model indexes - Adapt all components using the account selector or the account selection - Move/reuse qml components involved in the account selector UI - Remove nim logic used to handle index based account selection. - Adding storybook page
225 lines
8.0 KiB
QML
225 lines
8.0 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtQuick.Layouts 1.13
|
|
import QtQuick.Dialogs 1.3
|
|
|
|
import utils 1.0
|
|
import shared.controls 1.0 as SharedControls
|
|
import shared.stores 1.0
|
|
|
|
import AppLayouts.Wallet 1.0
|
|
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Popups 0.1
|
|
import StatusQ.Components 0.1
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Core.Utils 0.1 as StatusQUtils
|
|
|
|
import utils 1.0
|
|
|
|
import "../panels"
|
|
import "../controls"
|
|
import "../views"
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property var selectedAccount
|
|
property var store
|
|
|
|
signal recipientSelected(var recipient, int type)
|
|
|
|
enum Type {
|
|
Address,
|
|
Account,
|
|
SavedAddress,
|
|
RecentsAddress,
|
|
None
|
|
}
|
|
|
|
QtObject {
|
|
id: d
|
|
|
|
// Use Layer1 controller since this could go on top of other activity lists
|
|
readonly property var activityController: root.store.tmpActivityController1
|
|
}
|
|
|
|
StatusTabBar {
|
|
id: accountSelectionTabBar
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
width: parent.width
|
|
|
|
StatusTabButton {
|
|
width: implicitWidth
|
|
text: qsTr("Saved")
|
|
}
|
|
StatusTabButton {
|
|
width: implicitWidth
|
|
objectName: "myAccountsTab"
|
|
text: qsTr("My Accounts")
|
|
}
|
|
StatusTabButton {
|
|
width: implicitWidth
|
|
text: qsTr("Recent")
|
|
}
|
|
}
|
|
|
|
// To-do adapt to new design and make block white/black once the list items etc support new color scheme
|
|
Rectangle {
|
|
anchors.top: accountSelectionTabBar.bottom
|
|
anchors.topMargin: -5
|
|
height: parent.height - accountSelectionTabBar.height
|
|
width: parent.width
|
|
color: Theme.palette.indirectColor1
|
|
radius: 8
|
|
|
|
StackLayout {
|
|
currentIndex: accountSelectionTabBar.currentIndex
|
|
|
|
anchors.fill: parent
|
|
|
|
StatusListView {
|
|
id: savedAddresses
|
|
|
|
model: root.store.savedAddressesModel
|
|
header: savedAddresses.count > 0 ? search : nothingInList
|
|
headerPositioning: ListView.OverlayHeader
|
|
delegate: SavedAddressListItem {
|
|
implicitWidth: ListView.view.width
|
|
modelData: model
|
|
visible: !savedAddresses.headerItem.text || name.toLowerCase().includes(savedAddresses.headerItem.text)
|
|
onClicked: recipientSelected(modelData, TabAddressSelectorView.Type.SavedAddress)
|
|
}
|
|
Component {
|
|
id: search
|
|
SearchBoxWithRightIcon {
|
|
width: parent.width
|
|
placeholderText: qsTr("Search for saved address")
|
|
z: 2
|
|
}
|
|
}
|
|
Component {
|
|
id: nothingInList
|
|
StatusBaseText {
|
|
width: savedAddresses.width
|
|
height: visible ? 56 : 0
|
|
font.pixelSize: 15
|
|
color: Theme.palette.directColor1
|
|
text: qsTr("No Saved Address")
|
|
horizontalAlignment: Text.AlignHCenter
|
|
verticalAlignment: Text.AlignVCenter
|
|
}
|
|
}
|
|
}
|
|
|
|
StatusListView {
|
|
id: myAccounts
|
|
objectName: "myAccountsList"
|
|
|
|
delegate: SharedControls.WalletAccountListItem {
|
|
required property var model
|
|
|
|
implicitWidth: ListView.view.width
|
|
name: model.name
|
|
address: model.address
|
|
|
|
emoji: model.emoji
|
|
walletColor: Utils.getColorForId(model.colorId)
|
|
currencyBalance: model.currencyBalance
|
|
walletType: model.walletType
|
|
migratedToKeycard: model.migratedToKeycard ?? false
|
|
accountBalance: model.accountBalance ?? null
|
|
chainShortNames: {
|
|
const chainShortNames = store.getNetworkShortNames(model.preferredSharingChainIds)
|
|
return WalletUtils.colorizedChainPrefix(chainShortNames)
|
|
}
|
|
onClicked: recipientSelected({name: model.name,
|
|
address: model.address,
|
|
color: model.color,
|
|
emoji: model.emoji,
|
|
walletType: model.walletType,
|
|
currencyBalance: model.currencyBalance,
|
|
preferredSharingChainIds: model.preferredSharingChainIds},
|
|
TabAddressSelectorView.Type.Account)
|
|
}
|
|
|
|
model: root.store.accounts
|
|
}
|
|
|
|
StatusListView {
|
|
id: recents
|
|
|
|
header: StatusBaseText {
|
|
height: visible ? 56 : 0
|
|
width: recents.width
|
|
font.pixelSize: 15
|
|
color: Theme.palette.directColor1
|
|
text: qsTr("No Recents")
|
|
horizontalAlignment: Text.AlignHCenter
|
|
verticalAlignment: Text.AlignVCenter
|
|
visible: recents.count <= 0
|
|
}
|
|
|
|
delegate: StatusListItem {
|
|
id: listItem
|
|
|
|
property var entry: activityEntry
|
|
property bool isIncoming: entry.txType === Constants.TransactionType.Receive
|
|
|
|
implicitWidth: ListView.view.width
|
|
height: visible ? 64 : 0
|
|
title: isIncoming ? StatusQUtils.Utils.elideText(entry.sender,6,4) : StatusQUtils.Utils.elideText(entry.recipient,6,4)
|
|
subTitle: LocaleUtils.getTimeDifference(new Date(parseInt(entry.timestamp) * 1000), new Date())
|
|
statusListItemTitle.elide: Text.ElideMiddle
|
|
statusListItemTitle.wrapMode: Text.NoWrap
|
|
radius: 0
|
|
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
|
|
statusListItemComponentsSlot.spacing: 5
|
|
components: [
|
|
StatusIcon {
|
|
id: transferIcon
|
|
height: 15
|
|
width: 15
|
|
color: listItem.isIncoming ? Style.current.success : Style.current.danger
|
|
icon: listItem.isIncoming ? "arrow-down" : "arrow-up"
|
|
rotation: 45
|
|
},
|
|
StatusTextWithLoadingState {
|
|
font.pixelSize: 15
|
|
customColor: Theme.palette.directColor1
|
|
text: LocaleUtils.currencyAmountToLocaleString(entry.amountCurrency)
|
|
}
|
|
]
|
|
onClicked: recipientSelected(entry, TabAddressSelectorView.Type.RecentsAddress)
|
|
}
|
|
|
|
model: d.activityController.model
|
|
|
|
onVisibleChanged: {
|
|
if (visible) {
|
|
updateRecentsActivity()
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: root
|
|
function onSelectedAccountChanged() {
|
|
if (visible) {
|
|
recents.updateRecentsActivity()
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateRecentsActivity() {
|
|
if(root.selectedAccount) {
|
|
d.activityController.setFilterAddressesJson(JSON.stringify([root.selectedAccount.address]), false)
|
|
}
|
|
d.activityController.updateFilter()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|