status-desktop/ui/imports/shared/views/chat/TransactionBubbleView.qml

245 lines
7.9 KiB
QML

import QtQuick 2.3
import StatusQ.Core 0.1
import utils 1.0
import shared 1.0
import shared.panels 1.0
import shared.popups 1.0
import shared.views.chat 1.0
import shared.controls.chat 1.0
import shared.controls 1.0
import shared.stores 1.0
Item {
id: root
width: rectangleBubble.width
height: rectangleBubble.height
property var store // expected ui/app/AppLayouts/Chat/stores/RootStore.qml
property var contactsStore
property var transactionParams
property var transactionParamsObject: {
try {
return JSON.parse(transactionParams)
} catch (e) {
console.error('Error parsing command parameters')
console.error('JSON:', transactionParams)
console.error('Error:', e)
return {
id: "",
fromAddress: "",
address: "",
contract: "",
value: "",
transactionHash: "",
commandState: 1,
signature: null
}
}
}
property var token:{
try {
return JSON.parse(transactionParamsObject.contract)
} catch (e) {
console.error('Error parsing command parameters')
console.error('JSON:', transactionParamsObject.contract)
console.error('Error:', e)
return ""
}
}
property var selectedRecipient: {
return {
address: transactionParamsObject.address,
name: senderDisplayName,
type: RecipientSelector.Type.Contact,
alias: senderDisplayName
}
}
property string tokenAmount: transactionParamsObject.value
property string tokenSymbol: token.symbol || ""
property string fiatValue: {
if (!tokenAmount || !token.symbol) {
return "0"
}
return root.store.getFiatValue(tokenAmount, token.symbol) + " " + defaultFiatSymbol
}
property int state: transactionParamsObject.commandState
// Any transaction where isCurrentUser is true is actually outgoing transaction.
property bool outgoing: isCurrentUser
property int innerMargin: 12
property bool isError: transactionParamsObject.contract === "{}"
onTokenSymbolChanged: {
if (!!tokenSymbol) {
tokenImage.source = Style.png("tokens/"+root.tokenSymbol)
}
}
Rectangle {
id: rectangleBubble
width: (bubbleLoader.active ? bubbleLoader.width : valueContainer.width)
+ timeText.width + 3 * root.innerMargin
height: childrenRect.height + root.innerMargin
radius: 16
color: Style.current.background
border.color: Style.current.border
border.width: 1
StyledText {
id: title
color: Style.current.secondaryText
text: {
if (root.state === Constants.transactionRequested) {
let prefix = outgoing? "↑ " : "↓ "
return prefix + qsTr("Transaction request")
}
return outgoing ?
qsTr("↑ Outgoing transaction") :
qsTr("↓ Incoming transaction")
}
font.weight: Font.Medium
anchors.top: parent.top
anchors.topMargin: Style.current.halfPadding
anchors.left: parent.left
anchors.leftMargin: root.innerMargin
font.pixelSize: 13
}
Item {
id: valueContainer
width: childrenRect.width
height: tokenText.height + fiatText.height
anchors.top: title.bottom
anchors.topMargin: 4
anchors.left: parent.left
anchors.leftMargin: root.innerMargin
StyledText {
id: txtError
color: Style.current.danger
visible: root.isError
text: qsTr("Token not found on your current network")
}
Image {
id: tokenImage
visible: !root.isError
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
id: tokenText
visible: !root.isError
color: Style.current.textColor
text: `${root.tokenAmount} ${root.tokenSymbol}`
anchors.left: tokenImage.right
anchors.leftMargin: Style.current.halfPadding
font.pixelSize: 22
}
StyledText {
id: fiatText
visible: !root.isError
color: Style.current.secondaryText
text: root.fiatValue
anchors.top: tokenText.bottom
anchors.left: tokenText.left
font.pixelSize: 13
}
}
Loader {
id: bubbleLoader
active: {
return !root.isError && (
isCurrentUser ||
(!isCurrentUser &&
!(root.state === Constants.addressRequested ||
root.state === Constants.transactionRequested)
)
)
}
sourceComponent: stateBubbleComponent
anchors.top: valueContainer.bottom
anchors.topMargin: Style.current.halfPadding
anchors.left: parent.left
anchors.leftMargin: root.innerMargin
}
Component {
id: stateBubbleComponent
StateBubble {
state: root.state
outgoing: root.outgoing
}
}
Loader {
id: buttonsLoader
active: !root.isError && (
(root.state === Constants.addressRequested && !root.outgoing) ||
(root.state === Constants.addressReceived && root.outgoing) ||
(root.state === Constants.transactionRequested && !root.outgoing)
)
sourceComponent: root.outgoing ? signAndSendComponent : acceptTransactionComponent
anchors.top: bubbleLoader.active ? bubbleLoader.bottom : valueContainer.bottom
anchors.topMargin: bubbleLoader.active ? root.innerMargin : 20
width: parent.width
}
Component {
id: acceptTransactionComponent
AcceptTransactionView {
state: root.state
store: root.store
contactsStore: root.contactsStore
token: root.token
fiatValue: root.fiatValue
tokenAmount: root.tokenAmount
selectedRecipient: root.selectedRecipient
}
}
Component {
id: signAndSendComponent
SendTransactionButton {
selectedAsset: token
selectedAmount: tokenAmount
selectedFiatAmount: fiatValue
fromAddress: transactionParamsObject.fromAddress
selectedRecipient: root.selectedRecipient
onSendTransaction: {
// TODO: https://github.com/status-im/status-desktop/issues/6778
console.log("not implemented")
}
}
}
StyledText {
id: timeText
color: Style.current.secondaryText
text: LocaleUtils.formatTime(messageTimestamp, Locale.ShortFormat)
anchors.left: bubbleLoader.active ? bubbleLoader.right : undefined
anchors.leftMargin: bubbleLoader.active ? 13 : 0
anchors.right: bubbleLoader.active ? undefined : parent.right
anchors.rightMargin: bubbleLoader.active ? 0 : root.innerMargin
anchors.bottom: bubbleLoader.active ? bubbleLoader.bottom : buttonsLoader.top
anchors.bottomMargin: bubbleLoader.active ? -root.innerMargin : 7
font.pixelSize: 10
}
}
}