985 lines
46 KiB
QML
985 lines
46 KiB
QML
import QtQuick 2.15
|
||
import QtQuick.Layouts 1.15
|
||
import QtQml 2.15
|
||
|
||
import StatusQ.Components 0.1
|
||
import StatusQ.Core.Theme 0.1
|
||
import StatusQ.Core 0.1
|
||
import StatusQ.Controls 0.1
|
||
import StatusQ.Core.Utils 0.1 as SQUtils
|
||
|
||
import AppLayouts.Wallet 1.0
|
||
import AppLayouts.Wallet.stores 1.0 as WalletStores
|
||
|
||
import utils 1.0
|
||
import shared 1.0
|
||
import shared.stores 1.0 as SharedStores
|
||
|
||
/*!
|
||
\qmltype TransactionDelegate
|
||
\inherits StatusListItem
|
||
\inqmlmodule shared.controls
|
||
\since shared.controls 1.0
|
||
\brief Delegate for transaction activity list
|
||
|
||
Delegate to display transaction activity data.
|
||
|
||
\qml
|
||
TransactionDelegate {
|
||
id: delegate
|
||
width: ListView.view.width
|
||
modelData: model.activityEntry
|
||
rootStore: RootStore
|
||
walletRootStore: WalletStores.RootStore
|
||
loading: isModelDataValid
|
||
}
|
||
\endqml
|
||
|
||
Additional usages should be handled using states.
|
||
*/
|
||
|
||
StatusListItem {
|
||
id: root
|
||
|
||
signal retryClicked()
|
||
|
||
property var modelData
|
||
property string timeStampText: isModelDataValid ? LocaleUtils.formatRelativeTimestamp(modelData.timestamp * 1000) : ""
|
||
property bool showAllAccounts: false
|
||
property bool displayValues: true
|
||
|
||
required property SharedStores.RootStore rootStore
|
||
required property WalletStores.RootStore walletRootStore
|
||
|
||
readonly property bool isModelDataValid: modelData !== undefined && !!modelData
|
||
|
||
readonly property string txID: isModelDataValid ? modelData.id : "INVALID"
|
||
readonly property int transactionStatus: isModelDataValid ? modelData.status : Constants.TransactionStatus.Pending
|
||
readonly property bool isMultiTransaction: isModelDataValid && modelData.isMultiTransaction
|
||
readonly property string currentCurrency: rootStore.currentCurrency
|
||
readonly property double cryptoValue: isModelDataValid ? modelData.amount : 0.0
|
||
readonly property double fiatValue: isModelDataValid && !isMultiTransaction ? rootStore.getFiatValue(cryptoValue, modelData.symbol) : 0.0
|
||
readonly property double inCryptoValue: isModelDataValid ? modelData.inAmount : 0.0
|
||
readonly property double inFiatValue: isModelDataValid && isMultiTransaction ? rootStore.getFiatValue(inCryptoValue, modelData.inSymbol): 0.0
|
||
readonly property double outCryptoValue: isModelDataValid ? modelData.outAmount : 0.0
|
||
readonly property double outFiatValue: isModelDataValid && isMultiTransaction ? rootStore.getFiatValue(outCryptoValue, modelData.outSymbol): 0.0
|
||
readonly property string networkColor: isModelDataValid ? SQUtils.ModelUtils.getByKey(rootStore.flatNetworks, "chainId", modelData.chainId, "chainColor") : ""
|
||
readonly property string networkName: isModelDataValid ? SQUtils.ModelUtils.getByKey(rootStore.flatNetworks, "chainId", modelData.chainId, "chainName") : ""
|
||
readonly property string networkNameIn: isMultiTransaction ? SQUtils.ModelUtils.getByKey(rootStore.flatNetworks, "chainId", modelData.chainIdIn, "chainName") : ""
|
||
readonly property string networkNameOut: isMultiTransaction ? SQUtils.ModelUtils.getByKey(rootStore.flatNetworks, "chainId", modelData.chainIdOut, "chainName") : ""
|
||
readonly property string addressNameTo: isModelDataValid ? walletRootStore.getNameForAddress(modelData.recipient) : ""
|
||
readonly property string addressNameFrom: isModelDataValid ? walletRootStore.getNameForAddress(modelData.sender) : ""
|
||
readonly property bool isNFT: isModelDataValid && modelData.isNFT
|
||
readonly property bool isCommunityAssetViaAirdrop: isModelDataValid && !!communityId && d.txType === Constants.TransactionType.Mint
|
||
readonly property string communityId: isModelDataValid && modelData.communityId ? modelData.communityId : ""
|
||
property var community: null
|
||
readonly property bool isCommunityToken: !!community && Object.keys(community).length > 0
|
||
readonly property string communityImage: isCommunityToken ? community.image : ""
|
||
readonly property string communityName: isCommunityToken ? community.name : ""
|
||
|
||
readonly property var dAppDetails: {
|
||
if (!isModelDataValid) {
|
||
return null
|
||
}
|
||
if (modelData.txType === Constants.TransactionType.Approve) {
|
||
return walletRootStore.getDappDetails(modelData.chainId, modelData.approvalSpender)
|
||
}
|
||
if (modelData.txType === Constants.TransactionType.Swap) {
|
||
return walletRootStore.getDappDetails(modelData.chainId, modelData.interactedContractAddress)
|
||
}
|
||
return null
|
||
}
|
||
|
||
readonly property string dAppIcon: dAppDetails ? dAppDetails.icon : ""
|
||
readonly property string dAppUrl: dAppDetails ? dAppDetails.url : ""
|
||
readonly property string dAppName: dAppDetails ? dAppDetails.name : ""
|
||
|
||
readonly property string transactionValue: {
|
||
if (!isModelDataValid) {
|
||
return qsTr("N/A")
|
||
} else if (root.isNFT) {
|
||
let value = ""
|
||
if (d.txType === Constants.TransactionType.Mint) {
|
||
value += modelData.amount + " "
|
||
}
|
||
value += (modelData.nftName ? modelData.nftName : "#" + modelData.tokenID)
|
||
return value
|
||
} else if (!modelData.symbol && !!modelData.tokenAddress) {
|
||
return "%1 (%2)".arg(root.rootStore.formatCurrencyAmount(cryptoValue, "")).arg(Utils.compactAddress(modelData.tokenAddress, 4))
|
||
}
|
||
return root.rootStore.formatCurrencyAmount(cryptoValue, modelData.symbol)
|
||
}
|
||
|
||
readonly property string inTransactionValue: {
|
||
if (!isModelDataValid || !isMultiTransaction) {
|
||
return qsTr("N/A")
|
||
} else if (!modelData.inSymbol && !!modelData.tokenInAddress) {
|
||
return "%1 (%2)".arg(root.rootStore.formatCurrencyAmount(inCryptoValue, "")).arg(Utils.compactAddress(modelData.tokenInAddress, 4))
|
||
}
|
||
return rootStore.formatCurrencyAmount(inCryptoValue, modelData.inSymbol)
|
||
}
|
||
readonly property string outTransactionValue: {
|
||
if (!isModelDataValid || !isMultiTransaction) {
|
||
return qsTr("N/A")
|
||
} else if (!modelData.outSymbol && !!modelData.tokenOutAddress) {
|
||
return "%1 (%2)".arg(root.rootStore.formatCurrencyAmount(outCryptoValue, "")).arg(Utils.compactAddress(modelData.tokenOutAddress, 4))
|
||
}
|
||
return rootStore.formatCurrencyAmount(outCryptoValue, modelData.outSymbol)
|
||
}
|
||
|
||
readonly property string tokenImage: {
|
||
if (!isModelDataValid || d.txType === Constants.TransactionType.ContractDeployment)
|
||
return ""
|
||
if (root.isNFT) {
|
||
return modelData.nftImageUrl ? modelData.nftImageUrl : ""
|
||
} else {
|
||
return Constants.tokenIcon(isMultiTransaction ? modelData.outSymbol : modelData.symbol)
|
||
}
|
||
}
|
||
|
||
readonly property string inTokenImage: isModelDataValid ? Constants.tokenIcon(modelData.inSymbol) : ""
|
||
|
||
readonly property string toAddress: !!addressNameTo ?
|
||
addressNameTo :
|
||
isModelDataValid ?
|
||
Utils.compactAddress(modelData.recipient, 4) :
|
||
""
|
||
|
||
readonly property string fromAddress: !!addressNameFrom ?
|
||
addressNameFrom :
|
||
isModelDataValid ?
|
||
Utils.compactAddress(modelData.sender, 4) :
|
||
""
|
||
|
||
property StatusAssetSettings statusIconAsset: StatusAssetSettings {
|
||
width: 12
|
||
height: 12
|
||
bgWidth: width + 2
|
||
bgHeight: bgWidth
|
||
bgRadius: bgWidth / 2
|
||
bgColor: root.color
|
||
color: "transparent"
|
||
name: {
|
||
switch(root.transactionStatus) {
|
||
case Constants.TransactionStatus.Pending:
|
||
return Style.svg("transaction/pending")
|
||
case Constants.TransactionStatus.Complete:
|
||
return Style.svg("transaction/confirmed")
|
||
case Constants.TransactionStatus.Finalised:
|
||
return Style.svg("transaction/finished")
|
||
case Constants.TransactionStatus.Failed:
|
||
return Style.svg("transaction/failed")
|
||
default:
|
||
return ""
|
||
}
|
||
}
|
||
}
|
||
|
||
property StatusAssetSettings tokenIconAsset: StatusAssetSettings {
|
||
width: 20
|
||
height: 20
|
||
bgWidth: width + 2
|
||
bgHeight: height + 2
|
||
bgRadius: bgWidth / 2
|
||
bgColor: d.lightTheme && Constants.isDefaultTokenIcon(root.tokenImage) ?
|
||
Theme.palette.white : "transparent"
|
||
color: "transparent"
|
||
isImage: !loading
|
||
name: root.tokenImage
|
||
isLetterIdenticon: loading
|
||
}
|
||
|
||
QtObject {
|
||
id: d
|
||
|
||
property int loadingPixelSize: 13
|
||
property int datePixelSize: 12
|
||
property int titlePixelSize: 15
|
||
property int subtitlePixelSize: 13
|
||
property bool showRetryButton: false
|
||
|
||
readonly property bool isLightTheme: Style.current.name === Constants.lightThemeName
|
||
property color animatedBgColor
|
||
property int txType: walletRootStore.transactionType(root.modelData)
|
||
|
||
function addressesEqual(address1, address2) {
|
||
return address1.toUpperCase() == address2.toUpperCase()
|
||
}
|
||
|
||
readonly property var secondIconAsset: StatusAssetSettings {
|
||
width: root.tokenIconAsset.width
|
||
height: root.tokenIconAsset.height
|
||
bgWidth: width + 2
|
||
bgHeight: height + 2
|
||
bgRadius: bgWidth / 2
|
||
bgColor: Theme.palette.white
|
||
isImage: root.tokenIconAsset.isImage
|
||
color: root.tokenIconAsset.color
|
||
name: d.secondIconSource
|
||
isLetterIdenticon: root.tokenIconAsset.isLetterIdenticon
|
||
}
|
||
|
||
readonly property string secondIconSource: {
|
||
if (!root.isModelDataValid || root.isNFT) {
|
||
return ""
|
||
}
|
||
|
||
if (modelData.txType === Constants.TransactionType.Swap) {
|
||
return root.inTokenImage
|
||
} else if (modelData.txType === Constants.TransactionType.Approve) {
|
||
return root.dAppIcon
|
||
}
|
||
return ""
|
||
}
|
||
readonly property bool isSecondIconVisible: secondIconSource !== ""
|
||
}
|
||
|
||
function getDetailsString(detailsObj) {
|
||
let details = ""
|
||
const endl = "\n"
|
||
const endl2 = endl + endl
|
||
const type = d.txType
|
||
const feeEthValue = rootStore.getGasEthValue(detailsObj.totalFees.amount, 1)
|
||
|
||
// TITLE
|
||
switch (type) {
|
||
case Constants.TransactionType.Send:
|
||
details += qsTr("Send transaction details" + endl2)
|
||
break
|
||
case Constants.TransactionType.Receive:
|
||
details += qsTr("Receive transaction details") + endl2
|
||
break
|
||
case Constants.TransactionType.Buy:
|
||
details += qsTr("Buy transaction details") + endl2
|
||
break
|
||
case Constants.TransactionType.Sell:
|
||
details += qsTr("Sell transaction details") + endl2
|
||
break
|
||
case Constants.TransactionType.Destroy:
|
||
details += qsTr("Destroy transaction details") + endl2
|
||
break
|
||
case Constants.TransactionType.Swap:
|
||
details += qsTr("Swap transaction details") + endl2
|
||
break
|
||
case Constants.TransactionType.Bridge:
|
||
details += qsTr("Bridge transaction details") + endl2
|
||
break
|
||
case Constants.TransactionType.ContractDeployment:
|
||
details += qsTr("Contract deployment details") + endl2
|
||
break
|
||
case Constants.TransactionType.Mint:
|
||
if (isNFT)
|
||
details += qsTr("Mint collectible details") + endl2
|
||
else
|
||
details += qsTr("Mint token details") + endl2
|
||
break
|
||
case Constants.TransactionType.Approve:
|
||
details += qsTr("Set spending cap transaction details") + endl2
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
|
||
details += qsTr("Summary") + endl
|
||
switch(type) {
|
||
case Constants.TransactionType.Buy:
|
||
case Constants.TransactionType.Sell:
|
||
case Constants.TransactionType.Destroy:
|
||
case Constants.TransactionType.Swap:
|
||
case Constants.TransactionType.Bridge:
|
||
case Constants.TransactionType.ContractDeployment:
|
||
case Constants.TransactionType.Mint:
|
||
case Constants.TransactionType.Approve:
|
||
details += getSubtitle(true, true) + endl2
|
||
break
|
||
default:
|
||
if (networkNameIn != networkNameOut) { // cross chain Send/Receive that involves bridging
|
||
details += getSubtitle(true, true) + endl2
|
||
}
|
||
else
|
||
details += qsTr("%1 from %2 to %3 via %4").arg(transactionValue).arg(fromAddress).arg(toAddress).arg(networkName) + endl2
|
||
break
|
||
}
|
||
|
||
if (root.isNFT) {
|
||
details += qsTr("Token ID") + endl + modelData.tokenID + endl2
|
||
if (!!modelData.nftName) {
|
||
details += qsTr("Token name") + endl + modelData.nftName + endl2
|
||
}
|
||
}
|
||
|
||
// PROGRESS
|
||
const networkLayer = SQUtils.ModelUtils.getByKey(rootStore.flatNetworks, "chainId", modelData.chainId, "layer")
|
||
|
||
const isBridge = type === Constants.TransactionType.Bridge
|
||
switch(transactionStatus) {
|
||
case Constants.TransactionStatus.Pending:
|
||
details += qsTr("Status") + endl
|
||
details += qsTr("Pending on %1").arg(root.networkName) + endl2
|
||
if (isBridge) {
|
||
details += qsTr("Pending on %1").arg(root.networkNameIn) + endl2
|
||
}
|
||
break
|
||
case Constants.TransactionStatus.Failed:
|
||
details += qsTr("Status") + endl
|
||
details += qsTr("Failed on %1").arg(root.networkName) + endl2
|
||
if (isBridge) {
|
||
details += qsTr("Failed on %1").arg(root.networkNameIn) + endl2
|
||
}
|
||
break
|
||
case Constants.TransactionStatus.Complete: {
|
||
const confirmationTimeStamp = WalletUtils.calculateConfirmationTimestamp(networkLayer, modelData.timestamp)
|
||
const timestampString = LocaleUtils.formatDateTime(modelData.timestamp * 1000, Locale.LongFormat)
|
||
details += qsTr("Status") + endl
|
||
details += qsTr("Signed on %1").arg(root.networkName) + endl + timestampString + endl2
|
||
details += qsTr("Confirmed on %1").arg(root.networkName) + endl
|
||
details += LocaleUtils.formatDateTime(confirmationTimeStamp * 1000, Locale.LongFormat) + endl2
|
||
if (isBridge) {
|
||
const networkInLayer = SQUtils.ModelUtils.getByKey(rootStore.flatNetworks, "chainId", modelData.chainIdIn, "layer")
|
||
const confirmationTimeStampIn = WalletUtils.calculateConfirmationTimestamp(networkInLayer, modelData.timestamp)
|
||
details += qsTr("Signed on %1").arg(root.networkNameIn) + endl + timestampString + endl2
|
||
details += qsTr("Confirmed on %1").arg(root.networkNameIn) + endl
|
||
details += LocaleUtils.formatDateTime(confirmationTimeStampIn * 1000, Locale.LongFormat) + endl2
|
||
}
|
||
break
|
||
}
|
||
case Constants.TransactionStatus.Finalised: {
|
||
const timestampString = LocaleUtils.formatDateTime(modelData.timestamp * 1000, Locale.LongFormat)
|
||
const confirmationTimeStamp = WalletUtils.calculateConfirmationTimestamp(networkLayer, modelData.timestamp)
|
||
const finalisationTimeStamp = WalletUtils.calculateFinalisationTimestamp(networkLayer, modelData.timestamp)
|
||
details += qsTr("Status") + endl
|
||
const epoch = Math.abs(walletRootStore.getEstimatedLatestBlockNumber(modelData.chainId) - detailsObj.blockNumberOut)
|
||
details += qsTr("Finalised in epoch %1 on %2").arg(epoch.toFixed(0)).arg(root.networkName) + endl2
|
||
details += qsTr("Signed on %1").arg(root.networkName) + endl + timestampString + endl2
|
||
details += qsTr("Confirmed on %1").arg(root.networkName) + endl
|
||
details += LocaleUtils.formatDateTime(confirmationTimeStamp * 1000, Locale.LongFormat) + endl2
|
||
details += qsTr("Finalised on %1").arg(root.networkName) + endl
|
||
details += LocaleUtils.formatDateTime(finalisationTimeStamp * 1000, Locale.LongFormat) + endl2
|
||
if (isBridge) {
|
||
const networkInLayer = SQUtils.ModelUtils.getByKey(rootStore.flatNetworks, "chainId", modelData.chainIdIn, "layer")
|
||
const confirmationTimeStampIn = WalletUtils.calculateConfirmationTimestamp(networkInLayer, modelData.timestamp)
|
||
const finalisationTimeStampIn = WalletUtils.calculateFinalisationTimestamp(networkInLayer, modelData.timestamp)
|
||
const epochIn = Math.abs(walletRootStore.getEstimatedLatestBlockNumber(modelData.chainIdIn) - detailsObj.blockNumberIn)
|
||
details += qsTr("Finalised in epoch %1 on %2").arg(epochIn.toFixed(0)).arg(root.networkNameIn) + endl2
|
||
details += qsTr("Signed on %1").arg(root.networkNameIn) + endl + timestampString + endl2
|
||
details += qsTr("Confirmed on %1").arg(root.networkNameIn) + endl
|
||
details += LocaleUtils.formatDateTime(confirmationTimeStampIn * 1000, Locale.LongFormat) + endl2
|
||
details += qsTr("Finalised on %1").arg(root.networkNameIn) + endl
|
||
details += LocaleUtils.formatDateTime(finalisationTimeStampIn * 1000, Locale.LongFormat) + endl2
|
||
}
|
||
|
||
break
|
||
}
|
||
default:
|
||
break
|
||
}
|
||
|
||
// SUMMARY ADRESSES
|
||
switch (type) {
|
||
case Constants.TransactionType.Swap:
|
||
details += qsTr("From") + endl + modelData.outSymbol + endl2
|
||
details += qsTr("To") + endl + modelData.inSymbol + endl2
|
||
details += qsTr("In") + endl + modelData.sender + endl2
|
||
break
|
||
case Constants.TransactionType.Bridge:
|
||
details += qsTr("From") + endl + networkNameOut + endl2
|
||
details += qsTr("To") + endl + networkNameIn + endl2
|
||
details += qsTr("In") + endl + modelData.sender + endl2
|
||
break
|
||
case Constants.TransactionType.ContractDeployment:
|
||
details += qsTr("From") + endl + modelData.sender + endl2
|
||
const failed = root.transactionStatus === Constants.TransactionStatus.Failed
|
||
const isPending = root.transactionStatus === Constants.TransactionStatus.Pending || !modelData.contract
|
||
if (failed) {
|
||
details += qsTr("To\nContract address not created")
|
||
} else if (isPending) {
|
||
details += qsTr("To\nAwaiting contract address...")
|
||
} else {
|
||
details += qsTr("To\nContract created") + endl + modelData.contract + endl2
|
||
}
|
||
break
|
||
default:
|
||
details += qsTr("From") + endl + modelData.sender + endl2
|
||
details += qsTr("To") + endl + modelData.recipient + endl2
|
||
break
|
||
}
|
||
if (!!detailsObj.protocol) {
|
||
details += qsTr("Using") + endl + detailsObj.protocol + endl2
|
||
}
|
||
if (root.isMultiTransaction) {
|
||
if (!!detailsObj.txHashOut) {
|
||
details += qsTr("%1 Tx hash").arg(root.networkNameOut) + endl + detailsObj.txHashOut + endl2
|
||
}
|
||
if (!!detailsObj.txHashIn) {
|
||
details += qsTr("%1 Tx hash").arg(root.networkNameIn) + endl + detailsObj.txHashIn + endl2
|
||
}
|
||
} else if (!!detailsObj.txHash) {
|
||
details += qsTr("%1 Tx hash").arg(root.networkName) + endl + detailsObj.txHash + endl2
|
||
}
|
||
|
||
const protocolFromContractAddress = "" // TODO fill protocol contract address for 'from' network for Bridge and Swap
|
||
if (!!detailsObj.protocol && !!protocolFromContractAddress) {
|
||
details += qsTr("%1 %2 contract address").arg(root.networkName).arg(detailsObj.protocol) + endl
|
||
details += protocolFromContractAddress + endl2
|
||
}
|
||
if (!!detailsObj.contract && type !== Constants.TransactionType.ContractDeployment && !/0x0+$/.test(detailsObj.contract)) {
|
||
let symbol = !!modelData.symbol || !modelData.tokenAddress ? modelData.symbol : "(%1)".arg(Utils.compactAddress(modelData.tokenAddress, 4))
|
||
details += qsTr("%1 %2 contract address").arg(root.networkName).arg(symbol) + endl
|
||
details += detailsObj.contract + endl2
|
||
}
|
||
const protocolToContractAddress = "" // TODO fill protocol contract address for 'to' network for Bridge
|
||
if (!!protocolToContractAddress && !!detailsObj.protocol) {
|
||
details += qsTr("%1 %2 contract address").arg(networkNameOut).arg(detailsObj.protocol) + endl
|
||
details += protocolToContractAddress + endl2
|
||
}
|
||
switch (type) {
|
||
case Constants.TransactionType.Swap:
|
||
if (!!detailsObj.contractOut) {
|
||
details += qsTr("%1 %2 contract address").arg(root.networkName).arg(modelData.toSymbol) + endl
|
||
details += detailsObj.contractOut + endl2
|
||
}
|
||
break
|
||
case Constants.TransactionType.Bridge:
|
||
if (!!detailsObj.contractOut) {
|
||
details += qsTr("%1 %2 contract address").arg(networkNameOut).arg(modelData.symbol) + endl
|
||
details += detailsObj.contractOut + endl2
|
||
}
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
|
||
// SUMMARY DATA
|
||
if (type !== Constants.TransactionType.Bridge) {
|
||
details += qsTr("Network") + endl + networkName + endl2
|
||
}
|
||
if (!!detailsObj.tokenType) {
|
||
details += qsTr("Token format") + endl + detailsObj.tokenType.toUpperCase() + endl2
|
||
}
|
||
details += qsTr("Nonce") + endl + detailsObj.nonce + endl2
|
||
if (type === Constants.TransactionType.Bridge) {
|
||
details += qsTr("Included in Block on %1").arg(networkNameOut) + endl
|
||
details += detailsObj.blockNumberOut + endl2
|
||
if (detailsObj.blockNumberIn > 0) {
|
||
details += qsTr("Included in Block on %1").arg(networkNameIn) + endl
|
||
details += detailsObj.blockNumberIn + endl2
|
||
}
|
||
} else {
|
||
details += qsTr("Included in Block") + endl + detailsObj.blockNumberOut + endl2
|
||
}
|
||
|
||
// VALUES
|
||
const fiatTransactionValue = rootStore.formatCurrencyAmount(isMultiTransaction ? root.outFiatValue : root.fiatValue, root.currentCurrency)
|
||
const feeFiatValue = rootStore.getFiatValue(feeEthValue, Constants.ethToken)
|
||
let valuesString = ""
|
||
if (!root.isNFT) {
|
||
switch(type) {
|
||
case Constants.TransactionType.Send:
|
||
valuesString += qsTr("Amount sent %1 (%2)").arg(root.transactionValue).arg(fiatTransactionValue) + endl2
|
||
break
|
||
case Constants.TransactionType.Swap:
|
||
case Constants.TransactionType.Bridge:
|
||
valuesString += qsTr("Amount sent %1 (%2)").arg(root.outTransactionValue).arg(fiatTransactionValue) + endl2
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
if (type === Constants.TransactionType.Swap) {
|
||
const crypto = rootStore.formatCurrencyAmount(root.inCryptoValue, modelData.inSymbol)
|
||
const fiat = rootStore.formatCurrencyAmount(root.inCryptoValue, modelData.inSymbol)
|
||
valuesString += qsTr("Amount received %1 (%2)").arg(crypto).arg(fiat) + endl2
|
||
} else if (type === Constants.TransactionType.Bridge) {
|
||
// Reduce crypto value by fee value
|
||
const valueInCrypto = rootStore.getCryptoValue(root.fiatValue - feeFiatValue, modelData.inSymbol)
|
||
const crypto = rootStore.formatCurrencyAmount(valueInCrypto, modelData.inSymbol)
|
||
const fiat = rootStore.formatCurrencyAmount(root.fiatValue - feeFiatValue, root.currentCurrency)
|
||
valuesString += qsTr("Amount received %1 (%2)").arg(crypto).arg(fiat) + endl2
|
||
}
|
||
switch(type) {
|
||
case Constants.TransactionType.Send:
|
||
case Constants.TransactionType.Swap:
|
||
case Constants.TransactionType.Bridge:
|
||
const feeValue = LocaleUtils.currencyAmountToLocaleString(detailsObj.totalFees)
|
||
const feeFiat = rootStore.formatCurrencyAmount(feeFiatValue, root.currentCurrency)
|
||
valuesString += qsTr("Fees %1 (%2)").arg(feeValue).arg(feeFiat) + endl2
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
|
||
if (!root.isNFT || type !== Constants.TransactionType.Receive) {
|
||
if (type === Constants.TransactionType.Destroy || root.isNFT) {
|
||
const feeCrypto = rootStore.formatCurrencyAmount(feeEthValue, "ETH")
|
||
const feeFiat = rootStore.formatCurrencyAmount(feeFiatValue, root.currentCurrency)
|
||
valuesString += qsTr("Fees %1 (%2)").arg(feeCrypto).arg(feeFiat) + endl2
|
||
} else if (type === Constants.TransactionType.Receive || (type === Constants.TransactionType.Buy && networkLayer === 1)) {
|
||
valuesString += qsTr("Total %1 (%2)").arg(root.transactionValue).arg(fiatTransactionValue) + endl2
|
||
} else if (type === Constants.TransactionType.ContractDeployment) {
|
||
const isPending = root.transactionStatus === Constants.TransactionStatus.Pending
|
||
if (isPending) {
|
||
const maxFeeEthValue = rootStore.getFeeEthValue(detailsObj.maxTotalFees.amount)
|
||
const maxFeeCrypto = rootStore.formatCurrencyAmount(maxFeeEthValue, "ETH")
|
||
const maxFeeFiat = rootStore.formatCurrencyAmount(maxFeeCrypto, root.currentCurrency)
|
||
valuesString += qsTr("Estimated max fee %1 (%2)").arg(maxFeeCrypto).arg(maxFeeFiat) + endl2
|
||
} else {
|
||
const feeCrypto = rootStore.formatCurrencyAmount(feeEthValue, "ETH")
|
||
const feeFiat = rootStore.formatCurrencyAmount(feeFiatValue, root.currentCurrency)
|
||
valuesString += qsTr("Fees %1 (%2)").arg(feeCrypto).arg(feeFiat) + endl2
|
||
}
|
||
} else {
|
||
const feeEth = rootStore.formatCurrencyAmount(feeEthValue, "ETH")
|
||
const txValue = isMultiTransaction ? root.inTransactionValue : root.transactionValue
|
||
valuesString += qsTr("Total %1 + %2 (%3)").arg(txValue).arg(feeEth).arg(fiatTransactionValue) + endl2
|
||
}
|
||
}
|
||
|
||
if (valuesString !== "") {
|
||
const timestampString = LocaleUtils.formatDateTime(modelData.timestamp * 1000, Locale.LongFormat)
|
||
details += qsTr("Values at %1").arg(timestampString) + endl2
|
||
details += valuesString + endl2
|
||
}
|
||
|
||
// Remove no-break space
|
||
details = details.replace(/[\xA0]/g, " ");
|
||
// Remove empty new lines at the end
|
||
return details.replace(/[\r\n\s]*$/, '')
|
||
}
|
||
|
||
function getSubtitle(allAccounts, description) {
|
||
if (root.isCommunityAssetViaAirdrop) {
|
||
let communityInfo = ""
|
||
if (!description) {
|
||
// Showing image only in delegate. In description url shouldn't be showed
|
||
communityInfo += "<img src='" + root.communityImage + "' width='18' height='18' </img> "
|
||
}
|
||
communityInfo += root.communityName
|
||
return qsTr("%1 (community asset) from %2 via %3").arg(root.transactionValue).arg(communityInfo).arg(root.networkName)
|
||
}
|
||
|
||
switch(d.txType) {
|
||
case Constants.TransactionType.Receive:
|
||
// Cross chain receive. Use bridge pattern
|
||
if (root.networkNameIn != root.networkNameOut && root.networkNameIn && root.networkNameOut) {
|
||
if (allAccounts)
|
||
return qsTr("%1 from %2 to %3 via %4 and %5").arg(inTransactionValue).arg(fromAddress).arg(toAddress).arg(networkNameOut).arg(networkNameIn)
|
||
return qsTr("%1 from %2 via %3 and %4").arg(inTransactionValue).arg(toAddress).arg(networkNameOut).arg(networkNameIn)
|
||
}
|
||
|
||
if (allAccounts)
|
||
return qsTr("%1 from %2 to %3 via %4").arg(transactionValue).arg(fromAddress).arg(toAddress).arg(networkName)
|
||
return qsTr("%1 from %2 via %3").arg(transactionValue).arg(fromAddress).arg(networkName)
|
||
case Constants.TransactionType.Buy:
|
||
let protocol = "" // TODO fill data for buy
|
||
if (allAccounts)
|
||
return qsTr("%1 on %2 via %3 in %4").arg(transactionValue).arg(protocol).arg(networkName).arg(toAddress)
|
||
return qsTr("%1 on %2 via %3").arg(transactionValue).arg(protocol).arg(networkName)
|
||
case Constants.TransactionType.Destroy:
|
||
if (allAccounts)
|
||
return qsTr("%1 at %2 via %3 in %4").arg(inTransactionValue).arg(toAddress).arg(networkName).arg(toAddress)
|
||
return qsTr("%1 at %2 via %3").arg(inTransactionValue).arg(toAddress).arg(networkName)
|
||
case Constants.TransactionType.Swap:
|
||
if (root.dAppName !== "") {
|
||
if (allAccounts)
|
||
return qsTr("%1 to %2 using %3 on %4 in %5").arg(outTransactionValue).arg(inTransactionValue).arg(root.dAppName).arg(networkName).arg(fromAddress)
|
||
return qsTr("%1 to %2 using %3 on %4").arg(outTransactionValue).arg(inTransactionValue).arg(root.dAppName).arg(networkName)
|
||
}
|
||
if (allAccounts)
|
||
return qsTr("%1 to %2 on %3 in %4").arg(outTransactionValue).arg(inTransactionValue).arg(networkName).arg(fromAddress)
|
||
return qsTr("%1 to %2 on %3").arg(outTransactionValue).arg(inTransactionValue).arg(networkName)
|
||
case Constants.TransactionType.Bridge:
|
||
if (allAccounts)
|
||
return qsTr("%1 from %2 to %3 in %4").arg(outTransactionValue).arg(networkNameOut).arg(networkNameIn).arg(fromAddress)
|
||
return qsTr("%1 from %2 to %3").arg(outTransactionValue).arg(networkNameOut).arg(networkNameIn)
|
||
case Constants.TransactionType.ContractDeployment:
|
||
const name = addressNameTo || addressNameFrom
|
||
return qsTr("Via %1 on %2").arg(name).arg(networkName)
|
||
case Constants.TransactionType.Mint:
|
||
if (allAccounts)
|
||
return qsTr("%1 via %2 in %3").arg(transactionValue).arg(networkName).arg(toAddress)
|
||
return qsTr("%1 via %2").arg(transactionValue).arg(networkName)
|
||
case Constants.TransactionType.Approve:
|
||
if (root.dAppUrl !== "") {
|
||
if (allAccounts)
|
||
return qsTr("%1 in %2 for %3 on %4").arg(transactionValue).arg(toAddress).arg(dAppUrl).arg(networkName)
|
||
return qsTr("%1 for %2 on %3").arg(transactionValue).arg(dAppUrl).arg(networkName)
|
||
}
|
||
if (allAccounts)
|
||
return qsTr("%1 in %2 on %3").arg(transactionValue).arg(toAddress).arg(networkName)
|
||
return qsTr("%1 on %2").arg(transactionValue).arg(networkName)
|
||
default:
|
||
// Cross chain send. Use bridge pattern
|
||
if (root.networkNameIn != root.networkNameOut && root.networkNameIn && root.networkNameOut) {
|
||
if (allAccounts)
|
||
return qsTr("%1 from %2 to %3 via %4 and %5").arg(inTransactionValue).arg(fromAddress).arg(toAddress).arg(networkNameOut).arg(networkNameIn)
|
||
return qsTr("%1 to %2 via %3 and %4").arg(inTransactionValue).arg(toAddress).arg(networkNameOut).arg(networkNameIn)
|
||
}
|
||
|
||
if (allAccounts)
|
||
return qsTr("%1 from %2 to %3 via %4").arg(transactionValue).arg(fromAddress).arg(toAddress).arg(networkName)
|
||
return qsTr("%1 to %2 via %3").arg(transactionValue).arg(toAddress).arg(networkName)
|
||
}
|
||
}
|
||
|
||
rightPadding: 16
|
||
enabled: !loading
|
||
loading: !isModelDataValid
|
||
color: {
|
||
if (bgColorAnimation.running) {
|
||
return d.animatedBgColor
|
||
}
|
||
return sensor.containsMouse ? Theme.palette.baseColor5 : Style.current.transparent
|
||
}
|
||
|
||
statusListItemIcon.active: (loading || root.asset.name)
|
||
asset {
|
||
width: 24
|
||
height: 24
|
||
isImage: false
|
||
imgIsIdenticon: true
|
||
isLetterIdenticon: loading
|
||
name: {
|
||
if (!root.isModelDataValid)
|
||
return ""
|
||
|
||
switch(d.txType) {
|
||
case Constants.TransactionType.Send:
|
||
return "send"
|
||
case Constants.TransactionType.Receive:
|
||
return "receive"
|
||
case Constants.TransactionType.Buy:
|
||
case Constants.TransactionType.Sell:
|
||
case Constants.TransactionType.Mint:
|
||
return "token"
|
||
case Constants.TransactionType.Destroy:
|
||
return "destroy"
|
||
case Constants.TransactionType.Swap:
|
||
return "swap"
|
||
case Constants.TransactionType.Bridge:
|
||
return "bridge"
|
||
case Constants.TransactionType.ContractDeployment:
|
||
return "contract_deploy"
|
||
case Constants.TransactionType.Approve:
|
||
return "approve"
|
||
default:
|
||
return ""
|
||
}
|
||
}
|
||
bgColor: "transparent"
|
||
color: Theme.palette.directColor1
|
||
bgBorderWidth: 1
|
||
bgBorderColor: Theme.palette.primaryColor3
|
||
}
|
||
|
||
sensor.children: [
|
||
StatusRoundIcon {
|
||
id: leftIconStatusIcon
|
||
visible: !root.loading
|
||
anchors {
|
||
right: root.statusListItemIcon.right
|
||
bottom: root.statusListItemIcon.bottom
|
||
}
|
||
asset: root.statusIconAsset
|
||
}
|
||
]
|
||
|
||
// Title
|
||
title: {
|
||
if (root.loading) {
|
||
return "dummmy"
|
||
} else if (!root.isModelDataValid) {
|
||
return ""
|
||
}
|
||
|
||
const isPending = root.transactionStatus === Constants.TransactionStatus.Pending
|
||
const failed = root.transactionStatus === Constants.TransactionStatus.Failed
|
||
switch(d.txType) {
|
||
case Constants.TransactionType.Send:
|
||
return failed ? qsTr("Send failed") : (isPending ? qsTr("Sending") : qsTr("Sent"))
|
||
case Constants.TransactionType.Receive:
|
||
return failed ? qsTr("Receive failed") : (isPending ? qsTr("Receiving") : qsTr("Received"))
|
||
case Constants.TransactionType.Buy:
|
||
return failed ? qsTr("Buy failed") : (isPending ? qsTr("Buying") : qsTr("Bought"))
|
||
case Constants.TransactionType.Sell:
|
||
return failed ? qsTr("Sell failed") : (isPending ? qsTr("Selling") : qsTr("Sold"))
|
||
case Constants.TransactionType.Destroy:
|
||
return failed ? qsTr("Destroy failed") : (isPending ? qsTr("Destroying") : qsTr("Destroyed"))
|
||
case Constants.TransactionType.Swap:
|
||
return failed ? qsTr("Swap failed") : (isPending ? qsTr("Swapping") : qsTr("Swapped"))
|
||
case Constants.TransactionType.Bridge:
|
||
return failed ? qsTr("Bridge failed") : (isPending ? qsTr("Bridging") : qsTr("Bridged"))
|
||
case Constants.TransactionType.ContractDeployment:
|
||
return failed ? qsTr("Contract deployment failed") : (isPending ? qsTr("Deploying contract") : qsTr("Contract deployed"))
|
||
case Constants.TransactionType.Mint:
|
||
if (isNFT)
|
||
return failed ? qsTr("Collectible minting failed") : (isPending ? qsTr("Minting collectible") : qsTr("Collectible minted"))
|
||
return failed ? qsTr("Token minting failed") : (isPending ? qsTr("Minting token") : qsTr("Token minted"))
|
||
case Constants.TransactionType.Approve:
|
||
return failed ? qsTr("Failed to set spending cap") : (isPending ? qsTr("Setting spending cap") : qsTr("Spending cap set"))
|
||
default:
|
||
return ""
|
||
}
|
||
}
|
||
statusListItemTitleArea.anchors.rightMargin: root.rightPadding
|
||
statusListItemTitle.font.weight: Font.DemiBold
|
||
statusListItemTitle.font.pixelSize: root.loading ? d.loadingPixelSize : d.titlePixelSize
|
||
|
||
// title icons and date
|
||
statusListItemTitleIcons.sourceComponent: Row {
|
||
spacing: 8
|
||
Row {
|
||
id: tokenImagesRow
|
||
visible: !root.loading && !!root.tokenIconAsset.name
|
||
spacing: secondTokenImage.visible ? -tokenImage.width * 0.2 : 0
|
||
StatusRoundIcon {
|
||
id: tokenImage
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
asset: root.tokenIconAsset
|
||
}
|
||
StatusRoundIcon {
|
||
id: secondTokenImage
|
||
visible: d.isSecondIconVisible
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
asset: d.secondIconAsset
|
||
}
|
||
}
|
||
StatusTextWithLoadingState {
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
text: root.loading ? root.title : root.timeStampText
|
||
verticalAlignment: Qt.AlignVCenter
|
||
font.pixelSize: root.loading ? d.loadingPixelSize : d.datePixelSize
|
||
visible: !!text
|
||
loading: root.loading
|
||
customColor: Theme.palette.baseColor1
|
||
leftPadding: tokenImagesRow.visible ? 0 : parent.spacing
|
||
}
|
||
}
|
||
|
||
// subtitle
|
||
subTitle: {
|
||
if (root.loading) {
|
||
return "dummy text dummy text dummy text dummy text dummy text dummy text"
|
||
}
|
||
|
||
if (!root.isModelDataValid) {
|
||
return ""
|
||
}
|
||
|
||
return getSubtitle(root.showAllAccounts, false)
|
||
}
|
||
statusListItemSubTitle.textFormat: root.isCommunityAssetViaAirdrop ? Text.RichText : Text.AutoText
|
||
statusListItemSubTitle.maximumLoadingStateWidth: 400
|
||
statusListItemSubTitle.customColor: Theme.palette.directColor1
|
||
statusListItemSubTitle.font.pixelSize: root.loading ? d.loadingPixelSize : d.subtitlePixelSize
|
||
statusListItemTagsRowLayout.anchors.topMargin: 4 // Spacing between title row nad subtitle row
|
||
|
||
// Right side components
|
||
components: [
|
||
Loader {
|
||
active: root.displayValues && !headerStatusLoader.active
|
||
visible: active
|
||
sourceComponent: ColumnLayout {
|
||
StatusTextWithLoadingState {
|
||
id: cryptoValueText
|
||
text: {
|
||
if (root.loading) {
|
||
return "dummy text"
|
||
} else if (!root.isModelDataValid || root.isNFT) {
|
||
return ""
|
||
}
|
||
|
||
switch(d.txType) {
|
||
case Constants.TransactionType.Send:
|
||
case Constants.TransactionType.Sell:
|
||
return "−" + root.transactionValue
|
||
case Constants.TransactionType.Buy:
|
||
case Constants.TransactionType.Receive:
|
||
return "+" + root.transactionValue
|
||
case Constants.TransactionType.Swap:
|
||
let outValue = root.outTransactionValue
|
||
outValue = outValue.replace('<', '<')
|
||
let inValue = root.inTransactionValue
|
||
inValue = inValue.replace('<', '<')
|
||
return "<font color=\"%1\">-%2</font> <font color=\"%3\">/</font> <font color=\"%4\">+%5</font>"
|
||
.arg(Theme.palette.directColor1)
|
||
.arg(outValue)
|
||
.arg(Theme.palette.baseColor1)
|
||
.arg(Theme.palette.successColor1)
|
||
.arg(inValue)
|
||
case Constants.TransactionType.Bridge:
|
||
case Constants.TransactionType.Approve:
|
||
default:
|
||
return ""
|
||
}
|
||
}
|
||
horizontalAlignment: Qt.AlignRight
|
||
Layout.alignment: Qt.AlignRight
|
||
font.pixelSize: root.loading ? d.loadingPixelSize : 13
|
||
customColor: {
|
||
if (!root.isModelDataValid)
|
||
return ""
|
||
|
||
switch(d.txType) {
|
||
case Constants.TransactionType.Receive:
|
||
case Constants.TransactionType.Buy:
|
||
case Constants.TransactionType.Swap:
|
||
return Theme.palette.successColor1
|
||
default:
|
||
return Theme.palette.directColor1
|
||
}
|
||
}
|
||
loading: root.loading
|
||
}
|
||
StatusTextWithLoadingState {
|
||
id: fiatValueText
|
||
Layout.alignment: Qt.AlignRight
|
||
horizontalAlignment: Qt.AlignRight
|
||
text: {
|
||
if (root.loading) {
|
||
return "dummy text"
|
||
} else if (!root.isModelDataValid || root.isNFT || !modelData.symbol) {
|
||
return ""
|
||
}
|
||
|
||
switch(d.txType) {
|
||
case Constants.TransactionType.Send:
|
||
case Constants.TransactionType.Sell:
|
||
case Constants.TransactionType.Buy:
|
||
return "−" + root.rootStore.formatCurrencyAmount(root.fiatValue, root.currentCurrency)
|
||
case Constants.TransactionType.Receive:
|
||
return "+" + root.rootStore.formatCurrencyAmount(root.fiatValue, root.currentCurrency)
|
||
case Constants.TransactionType.Swap:
|
||
return "-%1 / +%2".arg(root.rootStore.formatCurrencyAmount(root.outFiatValue, root.currentCurrency))
|
||
.arg(root.rootStore.formatCurrencyAmount(root.inFiatValue, root.currentCurrency))
|
||
case Constants.TransactionType.Bridge:
|
||
case Constants.TransactionType.Approve:
|
||
default:
|
||
return ""
|
||
}
|
||
}
|
||
font.pixelSize: root.loading ? d.loadingPixelSize : 12
|
||
customColor: Theme.palette.baseColor1
|
||
loading: root.loading
|
||
}
|
||
}
|
||
},
|
||
Loader {
|
||
id: headerStatusLoader
|
||
active: false
|
||
visible: active
|
||
sourceComponent: Rectangle {
|
||
id: statusRect
|
||
width: transactionTypeIcon.width + (retryButton.visible ? retryButton.width + 5 : 0)
|
||
height: transactionTypeIcon.height
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
color: "transparent"
|
||
radius: 100
|
||
border {
|
||
width: retryButton.visible ? 1 : 0
|
||
color: root.asset.bgBorderColor
|
||
}
|
||
|
||
StatusButton {
|
||
id: retryButton
|
||
anchors.left: parent.left
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
anchors.leftMargin: 10
|
||
radius: height / 2
|
||
height: parent.height * 0.7
|
||
verticalPadding: 0
|
||
horizontalPadding: radius
|
||
text: qsTr("Retry")
|
||
size: StatusButton.Small
|
||
type: StatusButton.Primary
|
||
visible: d.showRetryButton
|
||
onClicked: root.retryClicked()
|
||
}
|
||
|
||
StatusSmartIdenticon {
|
||
id: transactionTypeIcon
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
anchors.right: parent.right
|
||
enabled: false
|
||
asset: root.asset
|
||
active: !!root.asset.name
|
||
loading: root.loading
|
||
name: root.title
|
||
}
|
||
|
||
StatusRoundIcon {
|
||
visible: !root.loading
|
||
anchors {
|
||
right: transactionTypeIcon.right
|
||
bottom: transactionTypeIcon.bottom
|
||
}
|
||
asset: root.statusIconAsset
|
||
}
|
||
}
|
||
}
|
||
]
|
||
|
||
states: [
|
||
State {
|
||
name: "header"
|
||
PropertyChanges {
|
||
target: headerStatusLoader
|
||
active: true
|
||
}
|
||
PropertyChanges {
|
||
target: leftIconStatusIcon
|
||
visible: false
|
||
}
|
||
PropertyChanges {
|
||
target: root.statusListItemIcon
|
||
active: false
|
||
}
|
||
PropertyChanges {
|
||
target: root.asset
|
||
bgBorderWidth: d.showRetryButton ? 0 : 1
|
||
width: 34
|
||
height: 34
|
||
bgWidth: 56
|
||
bgHeight: 56
|
||
}
|
||
PropertyChanges {
|
||
target: root.statusIconAsset
|
||
width: 17
|
||
height: 17
|
||
}
|
||
// PropertyChanges { // TODO uncomment when retry failed tx is implemented
|
||
// target: d
|
||
// titlePixelSize: 17
|
||
// datePixelSize: 13
|
||
// subtitlePixelSize: 15
|
||
// loadingPixelSize: 14
|
||
// showRetryButton: (!root.loading && root.transactionStatus === Constants.TransactionStatus.Failed && walletRootStore.isOwnedAccount(modelData.sender))
|
||
// }
|
||
}
|
||
]
|
||
|
||
ColorAnimation {
|
||
id: bgColorAnimation
|
||
|
||
target: d
|
||
property: "animatedBgColor"
|
||
from: d.isLightTheme ? "#33869eff" : "#1a4360df"
|
||
to: "transparent"
|
||
duration: 1000
|
||
alwaysRunToEnd: true
|
||
|
||
onStopped: {
|
||
modelData.doneHighlighting()
|
||
}
|
||
}
|
||
// Add a delay before the animation to make it easier to notice when scrolling
|
||
Timer {
|
||
id: delayAnimation
|
||
interval: 250
|
||
running: root.visible && isModelDataValid && modelData.highlight
|
||
repeat: false
|
||
onTriggered: {
|
||
bgColorAnimation.start()
|
||
}
|
||
}
|
||
}
|