status-desktop/storybook/pages/TransactionDetailViewPage.qml

286 lines
9.5 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import Storybook 1.0
import StatusQ.Core.Theme 0.1
import AppLayouts.Wallet 1.0
import AppLayouts.Wallet.stores 1.0 as WalletStores
import "../../ui/app/AppLayouts/Wallet/views" // NOTE - there is no AppLayout.Wallet.views
import shared.controls 1.0
import shared.stores 1.0
import utils 1.0
import Models 1.0
SplitView {
id: root
property bool globalUtilsReady: false
property bool mainModuleReady: false
property bool isIncoming: false
RootStore {
id: rootStoreMock
function getFiatValue(cryptoValue, symbol) { return (cryptoValue * 1800).toPrecision(2) }
function getLatestBlockNumber() { return 4 }
function formatCurrencyAmount(value, symbol) { return value + " " + symbol }
function getNameForSavedWalletAddress(address) { return "Saved Wallet Name" }
function getNameForAddress(address) { return "Address Name" }
function getEnsForSavedWalletAddress(address) { return "123" }
function getGasEthValue(gasAmount, gasPrice) { return (gasAmount * Math.pow(10, -9)).toPrecision(5) }
readonly property string currentCurrency: "USD"
readonly property var flatNetworks: NetworksModel.flatNetworks
}
// globalUtilsInst mock
QtObject {
function getColorHashAsJson(publicKey) {
return JSON.stringify([{"segmentLength":1,"colorId":12},{"segmentLength":5,"colorId":18},
{"segmentLength":3,"colorId":25},{"segmentLength":3,"colorId":23},
{"segmentLength":1,"colorId":10},{"segmentLength":3,"colorId":26},
{"segmentLength":2,"colorId":30},{"segmentLength":1,"colorId":18},
{"segmentLength":4,"colorId":28},{"segmentLength":1,"colorId":17},
{"segmentLength":2,"colorId":2}])
}
function getColorId(publicKey) { return Math.floor(Math.random() * 10) }
Component.onCompleted: {
Utils.globalUtilsInst = this
root.globalUtilsReady = true
}
Component.onDestruction: {
root.globalUtilsReady = false
Utils.globalUtilsInst = {}
}
}
// mainModuleInst mock
QtObject {
function getContactDetailsAsJson(publicKey, getVerification) {
return JSON.stringify({
displayName: "ArianaP",
displayIcon: "",
publicKey: publicKey,
compressedPublicKey: "compressed",
name: "",
alias: "",
localNickname: "",
isContact: true
})
}
function isEnsVerified(publicKey) { return false }
Component.onCompleted: {
Utils.mainModuleInst = this
root.mainModuleReady = true
}
Component.onDestruction: {
root.mainModuleReady = false
Utils.mainModuleInst = {}
}
}
QtObject {
id: contactsStoreMockup
readonly property var myContactsModel: QtObject {
signal itemChanged(address: string)
}
function getContactPublicKeyByAddress(address) {
return ""
}
}
QtObject {
id: historyMockup
signal txDecoded(txHash: string, dataDecoded: string)
function fetchDecodedTxData(txHash, input) {
decodeTimer.txHash = txHash
decodeTimer.start()
}
readonly property Timer decodeTimer: Timer {
id: decodeTimer
property string txHash: ""
interval: 2000
onTriggered: {
const data = JSON.stringify({
name: "processDepositQueue",
signature: "processDepositQueue(address,uint256)",
id: "0xf94d2",
inputs: {
"0": "0x3030303030303030303030303637306463613632",
"1": "0x40e8d703000000000000000",
"2": "0x60d8f57dh0bcdd0da0a00ad000000",
"3": "0xd8ff5ba7fhfaafbf0fdfa0afaf1d000000"
}
})
historyMockup.txDecoded(txHash, data)
}
}
}
QtObject {
id: transactionData
property int chainId: 1
property int timestamp: Date.now() / 1000
property int txStatus: 0
property string type: "eth"
property string from: "eth:arb1:oeth:0xb38e8c17e38363af6ebdcb3dae12e0243582891d"
property string to: "0xBE0eB53F46cd790Cd13851d5EFf43D12404d33E8"
property bool isNFT: false
property string tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337"
property string nftName: "Happy Meow"
property string nftImageUrl: Theme.png("collectibles/HappyMeow")
property string symbol: "ETH"
property int txType: Constants.TransactionType.Send
readonly property var value: QtObject {
property real amount: amountSpinbox.realValue
property string symbol: "ETH"
property int displayDecimals: 5
property bool stripTrailingZeroes: true
}
}
QtObject {
id: transactionDetails
property string nonce: "0x123"
property string blockNumber: "0x124"
property string txHash: "0x4de3f6278C0DdFd3F29df9DcD979038F5c7bbc35"
property string txHashOut: "0x4de3f6278C0DdFd3F29df9DcD979038F5c7bbc35"
property string input: "0x40e8d703000000000000000000000000670dca62b3418bddd08cbc69cb4490a5a3382a9f0000000000000000000000000000000000000000000000000000000000000064ddd08cbc69cb4490a5a3382a9f0000000000"
property string contract: "0x4de3f6278C0DdFd3F29df9DcD979038F5c7bbc35"
readonly property var totalFees: QtObject {
property real amount: (transactionData.value / 15) * Math.pow(10, 9)
property string symbol: "Gwei"
property int displayDecimals: 8
property bool stripTrailingZeroes: true
}
}
QtObject {
id: overviewMockup
property var mixedcaseAddress: root.isIncoming ? transactionData.to : transactionData.from
}
QtObject {
id: networkConnectionStoreMockup
property bool sendBuyBridgeEnabled: true
}
QtObject {
id: controllerMockup
property var activityEntry: transactionData
property var activityDetails
function fetchExtraTxDetails() {
extraDetailsTimer.start()
}
readonly property Timer extraDetailsTimer: Timer {
id: extraDetailsTimer
interval: 1000
onTriggered: {
controllerMockup.activityDetails = transactionDetails
}
}
}
SplitView {
orientation: Qt.Vertical
SplitView.fillWidth: true
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
Rectangle {
anchors.fill: viewLoader
anchors.margins: -1
color: "transparent"
border.width: 1
border.color: "#808080"
}
Loader {
id: viewLoader
anchors.centerIn: parent
width: 800
height: 500
active: root.globalUtilsReady && root.mainModuleReady
sourceComponent: TransactionDetailView {
rootStore: rootStoreMock
currenciesStore: CurrenciesStore {}
contactsStore: contactsStoreMockup
controller: controllerMockup
overview: overviewMockup
networkConnectionStore: networkConnectionStoreMockup
}
}
}
LogsAndControlsPanel {
SplitView.minimumHeight: 100
SplitView.preferredHeight: 150
SplitView.fillWidth: true
}
}
Pane {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
ColumnLayout {
Label {
text: "Amount:"
}
SpinBox {
id: amountSpinbox
from: 0
to: 999999999
value: 12345
stepSize: 1
editable: true
readonly property int multiplier: Math.pow(10, decimals)
property int decimals: 5
property real realValue: value / multiplier
validator: DoubleValidator { bottom: 0.0 }
textFromValue: function(value, locale) { return Number(value / amountSpinbox.multiplier).toLocaleString(locale, 'f', amountSpinbox.decimals) }
valueFromText: function(text, locale) { return Number.fromLocaleString(locale, text) * amountSpinbox.multiplier }
}
CheckBox {
text: "is NFT"
checked: transactionData.isNFT
onCheckedChanged: transactionData.isNFT = checked
}
CheckBox {
text: "is incoming"
checked: root.isIncoming
onCheckedChanged: root.isIncoming = checked
}
}
}
}
// category: Wallet