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.stores 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 "../panels" import "../controls" import "../views" Item { id: root clip: true implicitHeight: accountSelectionTabBar.height + stackLayout.height + Style.current.bigPadding property var store signal contactSelected(string address, int type) QtObject { id: d readonly property int maxHeightForList: 281 } StatusTabBar { id: accountSelectionTabBar anchors.top: parent.top anchors.topMargin: 20 anchors.left: parent.left width: parent.width StatusTabButton { id: assetBtn width: implicitWidth text: qsTr("Saved") } StatusTabButton { id: collectiblesBtn width: implicitWidth objectName: "myAccountsTab" text: qsTr("My Accounts") } StatusTabButton { id: historyBtn width: implicitWidth text: qsTr("Recent") } } StackLayout { id: stackLayout anchors.top: accountSelectionTabBar.bottom height: currentIndex === 0 ? savedAddresses.height: currentIndex === 1 ? myAccounts.height : recents.height width: parent.width currentIndex: accountSelectionTabBar.currentIndex // To-do adapt to new design and make block white/balck once the list items etc support new color scheme Rectangle { Layout.maximumWidth: parent.width Layout.maximumHeight : savedAddresses.height color: Theme.palette.indirectColor1 radius: 8 StatusListView { id: savedAddresses anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top implicitWidth: parent.width height: Math.min(d.maxHeightForList, savedAddresses.contentHeight) model: root.store.savedAddressesModel header: savedAddresses.count > 0 ? search : nothingInList headerPositioning: ListView.OverlayHeader delegate: StatusListItem { implicitWidth: parent.width height: visible ? 64 : 0 title: name subTitle: address radius: 0 color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent" visible: !savedAddresses.headerItem.text || name.toLowerCase().includes(savedAddresses.headerItem.text) // TODO uncomment when #6456 is fixed // components: [ // StatusIcon { // icon: "star-icon" // width: 12 // height: 12 // } // ] onClicked: contactSelected(address, RecipientSelector.Type.Address ) } Component { id: search ColumnLayout { width: parent.width StatusInput { Layout.preferredHeight: 55 Layout.preferredWidth: parent.width input.showBackground: false placeholderText: qsTr("Search for saved address") input.rightComponent: StatusIcon { icon: "search" height: 17 color: Theme.palette.baseColor1 } } Rectangle { Layout.preferredHeight: 1 Layout.preferredWidth: parent.width color: Theme.palette.baseColor3 } } } 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 } } } } Rectangle { id: myAccountsRect Layout.maximumWidth: parent.width Layout.maximumHeight : myAccounts.height color: Theme.palette.indirectColor1 radius: 8 StatusListView { id: myAccounts objectName: "myAccountsList" anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top width: parent.width height: Math.min(d.maxHeightForList, myAccounts.contentHeight) delegate: StatusListItem { implicitWidth: parent.width objectName: model.name height: visible ? 64 : 0 title: !!model.name ? model.name : "" subTitle: "%1 %2".arg(LocaleUtils.numberToLocaleString(model.currencyBalance)).arg(store.currentCurrency.toUpperCase()) asset.emoji: !!model.emoji ? model.emoji: "" asset.color: model.color asset.name: !model.emoji ? "filled-account": "" asset.letterSize: 14 asset.isLetterIdenticon: !!model.emoji ? true : false asset.bgColor: Theme.palette.indirectColor1 radius: 0 color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent" onClicked: contactSelected(model.address, RecipientSelector.Type.Account ) } model: root.store.accounts } } Rectangle { Layout.maximumWidth: parent.width Layout.maximumHeight : recents.height color: Theme.palette.indirectColor1 radius: 8 StatusListView { id: recents anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top width: parent.width height: Math.min(d.maxHeightForList, recents.contentHeight) 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 { property bool isIncoming: to === store.currentAccount.address implicitWidth: parent.width height: visible ? 64 : 0 title: isIncoming ? from : to subTitle: Utils.getTimeDifference(new Date(parseInt(timestamp) * 1000), new Date()) statusListItemTitle.elide: Text.ElideMiddle statusListItemTitle.wrapMode: Text.NoWrap radius: 0 color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent" components: [ StatusIcon { id: transferIcon height: 15 width: 15 color: isIncoming ? Style.current.success : Style.current.danger icon: isIncoming ? "arrow-down" : "arrow-up" rotation: 45 }, StatusBaseText { id: contactsLabel font.pixelSize: 15 color: Theme.palette.directColor1 text: store.hex2Eth(value) } ] onClicked: contactSelected(title, RecipientSelector.Type.Address) } model: root.store.walletSectionTransactionsInst.model } } } }