status-desktop/ui/app/AppLayouts/Wallet/HistoryTab.qml

273 lines
8.3 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import "./components"
import "./data"
import "../../../imports"
import "../../../shared"
import "../../../shared/status"
Item {
property var tokens: {
const count = walletModel.defaultTokenList.rowCount()
const toks = []
for (var i = 0; i < count; i++) {
toks.push({
"address": walletModel.defaultTokenList.rowData(i, 'address'),
"symbol": walletModel.defaultTokenList.rowData(i, 'symbol')
})
}
return toks
}
function checkIfHistoryIsBeingFetched() {
loadMoreButton.loadedMore = false;
// prevent history from being fetched everytime you click on
// the history tab
if (walletModel.isHistoryFetched(walletModel.currentAccount.account))
return;
fetchHistory();
}
function fetchHistory() {
if (walletModel.isFetchingHistory(walletModel.currentAccount.address)) {
loadingImg.active = true
} else {
walletModel.loadTransactionsForAccount(
walletModel.currentAccount.address)
}
}
id: root
Loader {
id: loadingImg
active: false
sourceComponent: loadingImageComponent
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.top: parent.top
anchors.topMargin: Style.currentPadding
}
Component {
id: loadingImageComponent
LoadingImage {}
}
Connections {
target: walletModel
onHistoryWasFetched: checkIfHistoryIsBeingFetched()
onLoadingTrxHistory: {
loadingImg.active = isLoading
}
}
Component {
id: transactionListItemCmp
Rectangle {
id: transactionListItem
property bool isHovered: false
property string symbol: ""
anchors.right: parent.right
anchors.left: parent.left
height: 64
color: isHovered ? Style.current.secondaryBackground : Style.current.transparent
radius: 8
Component.onCompleted: {
const count = root.tokens.length
for (var i = 0; i < count; i++) {
let token = root.tokens[i]
if (token.address === contract) {
transactionListItem.symbol = token.symbol
break
}
}
}
MouseArea {
anchors.fill: parent
onClicked: transactionModal.open()
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
transactionListItem.isHovered = true
}
onExited: {
transactionListItem.isHovered = false
}
}
TransactionModal {
id: transactionModal
}
Item {
Image {
id: assetIcon
width: 40
height: 40
source: "../../img/tokens/"
+ (transactionListItem.symbol
!= "" ? transactionListItem.symbol : "ETH") + ".png"
anchors.left: parent.left
anchors.top: parent.top
anchors.topMargin: 12
onStatusChanged: {
if (assetIcon.status == Image.Error) {
assetIcon.source = "../../img/tokens/0-native.png"
}
}
anchors.leftMargin: Style.current.padding
}
StyledText {
id: transferIcon
anchors.topMargin: 25
anchors.top: parent.top
anchors.left: assetIcon.right
anchors.leftMargin: 22
height: 15
width: 15
color: to !== walletModel.currentAccount.address ? "#4360DF" : "green"
text: to !== walletModel.currentAccount.address ? "↑" : "↓"
}
StyledText {
id: transactionValue
anchors.left: transferIcon.right
anchors.leftMargin: Style.current.smallPadding
anchors.top: parent.top
anchors.topMargin: Style.current.bigPadding
font.pixelSize: 15
text: utilsModel.hex2Eth(value) + " " + transactionListItem.symbol
}
}
Item {
anchors.right: timeInfo.left
anchors.top: parent.top
anchors.topMargin: Style.current.bigPadding
width: children[0].width + children[1].width
StyledText {
text: to !== walletModel.currentAccount.address ?
//% "To "
qsTrId("to-") :
//% "From "
qsTrId("from-")
anchors.right: addressValue.left
color: Style.current.darkGrey
anchors.top: parent.top
font.pixelSize: 15
font.strikeout: false
}
StyledText {
id: addressValue
font.family: Style.current.fontHexRegular.name
text: to
width: 100
elide: Text.ElideMiddle
anchors.right: parent.right
anchors.top: parent.top
font.pixelSize: 15
}
}
Item {
id: timeInfo
anchors.right: parent.right
anchors.top: parent.top
anchors.topMargin: Style.current.bigPadding
width: children[0].width + children[1].width + children[2].width
StyledText {
text: "• "
font.weight: Font.Bold
anchors.right: timeIndicator.left
color: Style.current.darkGrey
anchors.top: parent.top
font.pixelSize: 15
}
StyledText {
id: timeIndicator
text: "At "
anchors.right: timeValue.left
color: Style.current.darkGrey
anchors.top: parent.top
font.pixelSize: 15
font.strikeout: false
}
StyledText {
id: timeValue
text: timestamp
anchors.right: parent.right
anchors.top: parent.top
font.pixelSize: 15
anchors.rightMargin: Style.current.smallPadding
}
}
}
}
ListView {
id: transactionListRoot
anchors.topMargin: 20
height: parent.height - extraButtons.height
width: parent.width
clip: true
model: walletModel.transactions
delegate: transactionListItemCmp
ScrollBar.vertical: ScrollBar {
id: scrollBar
}
onCountChanged: {
if (loadMoreButton.loadedMore)
transactionListRoot.positionViewAtEnd();
}
}
RowLayout {
id: extraButtons
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: loadMoreButton.height
StatusButton {
id: loadMoreButton
//% "Load More"
text: qsTrId("load-more")
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
property bool loadedMore: false
Connections {
onClicked: {
fetchHistory()
loadMoreButton.loadedMore = true
}
onLoadingTrxHistory: {
loadingImg.active = isLoading
}
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/