245 lines
7.9 KiB
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
|
|
}
|
|
}
|
|
}
|