status-desktop/ui/app/AppLayouts/Wallet/views/LeftTabView.qml

397 lines
14 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import utils 1.0
import shared 1.0
import shared.panels 1.0
import shared.controls 1.0
import shared.popups 1.0
import shared.popups.keycard 1.0
import shared.stores 1.0
import "../controls"
import "../popups"
import "../stores"
import "../addaccount"
Rectangle {
id: root
objectName: "walletLeftTab"
property var networkConnectionStore
property var changeSelectedAccount: function(){}
property bool showSavedAddresses: false
onShowSavedAddressesChanged: {
walletAccountsListView.footerItem.button.highlighted = showSavedAddresses
}
property var emojiPopup: null
color: Style.current.secondaryMenuBackground
Loader {
id: addAccount
active: false
asynchronous: true
sourceComponent: AddAccountPopup {
store.emojiPopup: root.emojiPopup
store.addAccountModule: walletSection.addAccountModule
anchors.centerIn: parent
}
onLoaded: {
addAccount.item.open()
}
}
Loader {
id: walletBckgAccountContextMenu
sourceComponent: AccountContextMenu {
uniqueIdentifier: "wallet-background"
onClosed: {
walletBckgAccountContextMenu.active = false
}
onAddNewAccountClicked: {
RootStore.runAddAccountPopup()
}
onAddWatchOnlyAccountClicked: {
RootStore.runAddWatchOnlyAccountPopup()
}
}
}
Loader {
id: removeAccountConfirmation
active: false
property bool simple
property string accountKeyUid
property string accountName
property string accountAddress
property string accountDerivationPath
sourceComponent: RemoveAccountConfirmationPopup {
anchors.centerIn: parent
width: 400
simple: removeAccountConfirmation.simple
accountKeyUid: removeAccountConfirmation.accountKeyUid
accountName: removeAccountConfirmation.accountName
accountAddress: removeAccountConfirmation.accountAddress
accountDerivationPath: removeAccountConfirmation.accountDerivationPath
onClosed: {
removeAccountConfirmation.active = false
}
onRemoveAccount: {
close()
RootStore.deleteAccount(keyUid, address)
}
}
onLoaded: {
removeAccountConfirmation.item.open()
}
}
Connections {
target: walletSection
function onDisplayAddAccountPopup() {
addAccount.active = true
}
function onDestroyAddAccountPopup() {
addAccount.active = false
}
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton) {
walletBckgAccountContextMenu.active = true
walletBckgAccountContextMenu.item.popup(mouse.x, mouse.y)
}
}
}
ColumnLayout {
anchors.fill: parent
spacing: Style.current.padding
Item {
Layout.fillWidth: true
Layout.preferredHeight: walletTitleText.height
Layout.leftMargin: Style.current.padding
Layout.rightMargin: Style.current.padding
Layout.topMargin: Style.current.padding
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
mouse.accepted = true
}
}
StatusBaseText {
id: walletTitleText
text: qsTr("Wallet")
font.weight: Font.Bold
font.pixelSize: 17
color: Theme.palette.directColor1
}
StatusRoundButton {
objectName: "addAccountButton"
icon.name: "add-circle"
anchors.right: parent.right
anchors.rightMargin: -Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter
width: height
height: parent.height * 2
color: hovered || highlighted ? Theme.palette.primaryColor3
: "transparent"
onClicked: RootStore.runAddAccountPopup()
}
}
Item {
height: childrenRect.height
Layout.fillWidth: true
Layout.leftMargin: Style.current.padding
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
mouse.accepted = true
}
}
StyledTextEditWithLoadingState {
id: walletAmountValue
objectName: "walletLeftListAmountValue"
customColor: Style.current.textColor
text: {
LocaleUtils.currencyAmountToLocaleString(RootStore.totalCurrencyBalance)
}
selectByMouse: true
cursorVisible: true
readOnly: true
width: parent.width
font.weight: Font.Medium
font.pixelSize: 22
loading: RootStore.currentAccount.assetsLoading
visible: !networkConnectionStore.accountBalanceNotAvailable
}
StatusFlatRoundButton {
id: errorIcon
width: 14
height: visible ? 14 : 0
icon.width: 14
icon.height: 14
icon.name: "tiny/warning"
icon.color: Theme.palette.dangerColor1
tooltip.text: networkConnectionStore.accountBalanceNotAvailableText
tooltip.maxWidth: 200
visible: networkConnectionStore.accountBalanceNotAvailable
}
StatusBaseText {
id: totalValue
color: Theme.palette.baseColor1
text: qsTr("Total value")
width: parent.width
anchors.top: walletAmountValue.bottom
anchors.topMargin: 4
font.pixelSize: 12
}
}
StatusListView {
id: walletAccountsListView
objectName: "walletAccountsListView"
spacing: Style.current.smallPadding
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: Style.current.halfPadding
// ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
readonly property Item firstItem: count > 0 ? itemAtIndex(0) : null
delegate: StatusListItem {
objectName: "walletAccount-" + model.name
readonly property bool itemLoaded: !model.assetsLoading // needed for e2e tests
width: ListView.view.width - Style.current.padding * 2
highlighted: !ListView.view.footerItem.button.highlighted &&
RootStore.currentAccount.name === model.name
anchors.horizontalCenter: !!parent ? parent.horizontalCenter : undefined
title: model.name
subTitle: LocaleUtils.currencyAmountToLocaleString(model.currencyBalance)
asset.emoji: !!model.emoji ? model.emoji: ""
asset.color: model.color
asset.name: !model.emoji ? "filled-account": ""
asset.width: 40
asset.height: 40
asset.letterSize: 14
asset.isLetterIdenticon: !!model.emoji ? true : false
asset.bgColor: Theme.palette.primaryColor3
statusListItemTitle.font.weight: Font.Medium
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
statusListItemSubTitle.loading: model.assetsLoading
errorMode: networkConnectionStore.accountBalanceNotAvailable
errorIcon.tooltip.maxWidth: 300
errorIcon.tooltip.text: networkConnectionStore.accountBalanceNotAvailableText
onClicked: {
if (mouse.button === Qt.RightButton) {
accountContextMenu.active = true
accountContextMenu.item.popup(mouse.x, mouse.y)
return
}
changeSelectedAccount(index)
showSavedAddresses = false
}
components: [
StatusIcon {
width: !!icon ? 15: 0
height: !!icon ? 15: 0
color: Theme.palette.directColor1
icon: model.walletType === Constants.watchWalletType ? "show" : ""
},
StatusIcon {
width: !!icon ? 15: 0
height: !!icon ? 15: 0
color: Theme.palette.directColor1
icon: model.migratedToKeycard ? "keycard" : ""
}
]
Loader {
id: accountContextMenu
sourceComponent: AccountContextMenu {
uniqueIdentifier: model.name
account: model
onClosed: {
accountContextMenu.active = false
}
onEditAccountClicked: {
RootStore.runEditAccountPopup(model.address)
}
onDeleteAccountClicked: {
removeAccountConfirmation.simple = model.walletType === Constants.watchWalletType || model.walletType === Constants.keyWalletType
removeAccountConfirmation.accountKeyUid = model.keyUid
removeAccountConfirmation.accountName = model.name
removeAccountConfirmation.accountAddress = model.address
removeAccountConfirmation.accountDerivationPath = model.path
removeAccountConfirmation.active = true
}
onAddNewAccountClicked: {
RootStore.runAddAccountPopup()
}
onAddWatchOnlyAccountClicked: {
RootStore.runAddWatchOnlyAccountPopup()
}
}
}
}
readonly property bool footerOverlayed: contentHeight > availableHeight
footerPositioning: footerOverlayed ? ListView.OverlayFooter : ListView.InlineFooter
footer: Control {
id: footer
z: 2 // to be on top of delegates when in ListView.OverlayFooter
horizontalPadding: Style.current.padding
verticalPadding: Style.current.padding
property alias button: savedAddressesBtn
background: Rectangle {
color: root.color
implicitWidth: root.width
implicitHeight: parent.ListView.view.firstItem.height + Style.current.xlPadding
layer.enabled: parent.ListView.view.footerOverlayed
layer.effect: DropShadow {
verticalOffset: -10
radius: 20
samples: 41
fast: true
cached: true
color: Theme.palette.dropShadow2
}
StatusMenuSeparator {
id: footerSeparator
width: parent.width
visible: !footer.ListView.view.footerOverlayed
}
}
contentItem: StatusButton {
id: savedAddressesBtn
objectName: "savedAddressesBtn"
size: StatusBaseButton.Size.Large
normalColor: "transparent"
hoverColor: Theme.palette.primaryColor3
asset.color: Theme.palette.primaryColor1
asset.bgColor: Theme.palette.primaryColor3
font.weight: Font.Medium
text: qsTr("Saved addresses")
icon.name: "address"
icon.width: 40
icon.height: 40
isRoundIcon: true
textColor: Theme.palette.directColor1
textAlignment: Qt.AlignVCenter | Qt.AlignLeft
textFillWidth: true
spacing: parent.ListView.view.firstItem.statusListItemTitleArea.anchors.leftMargin
onClicked: {
showSavedAddresses = true
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
propagateComposedEvents: true
onClicked: {
mouse.accepted = true
}
}
}
}
model: RootStore.accounts
}
}
}