status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

TransactionDetailView: refactored to take root store as a dependency

This commit is contained in:
Michał Cieślak 2024-09-24 12:16:40 +02:00 committed by Michał
parent c3a234908d
commit 0686552bc3
3 changed files with 52 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
storybook/pages/TransactionDetailViewPage.qml
View File

@ -20,23 +20,23 @@ SplitView {
property bool globalUtilsReady: false property bool globalUtilsReady: false
property bool mainModuleReady: false property bool mainModuleReady: false
property bool rootStoreReady: false
property bool isIncoming: false property bool isIncoming: false
Component.onCompleted: { RootStore {
RootStore.getFiatValue = (cryptoValue, symbol) => { return (cryptoValue * 1800).toPrecision(2) } id: rootStoreMock
RootStore.getLatestBlockNumber = () => { return 4 }
RootStore.formatCurrencyAmount = (value, symbol) => { return value + " " + symbol }
RootStore.getNameForSavedWalletAddress = (address) => { return "Saved Wallet Name" }
RootStore.getNameForAddress = (address) => { return "Address Name" }
RootStore.getEnsForSavedWalletAddress = (address) => { return "123" }
RootStore.getChainShortNamesForSavedWalletAddress = (address) => { return "" }
RootStore.getGasEthValue = (gasAmount, gasPrice) => { return (gasAmount * Math.pow(10, -9)).toPrecision(5) }
RootStore.currentCurrency = "USD"
RootStore.flatNetworks = NetworksModel.flatNetworks
root.rootStoreReady = true 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 getChainShortNamesForSavedWalletAddress(address) { return "" }
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 // globalUtilsInst mock
@ -225,8 +225,9 @@ SplitView {
width: 800 width: 800
height: 500 height: 500
active: root.globalUtilsReady && root.mainModuleReady && root.rootStoreReady active: root.globalUtilsReady && root.mainModuleReady
sourceComponent: TransactionDetailView { sourceComponent: TransactionDetailView {
rootStore: rootStoreMock
contactsStore: contactsStoreMockup contactsStore: contactsStoreMockup
controller: controllerMockup controller: controllerMockup
overview: overviewMockup overview: overviewMockup

1
ui/app/AppLayouts/Wallet/views/RightTabView.qml
View File

@ -501,6 +501,7 @@ RightTabBaseView {
showAllAccounts: RootStore.showAllAccounts showAllAccounts: RootStore.showAllAccounts
communitiesStore: root.communitiesStore communitiesStore: root.communitiesStore
sendModal: root.sendModal sendModal: root.sendModal
rootStore: SharedStores.RootStore
contactsStore: root.contactsStore contactsStore: root.contactsStore
networkConnectionStore: root.networkConnectionStore networkConnectionStore: root.networkConnectionStore
visible: (stack.currentIndex === 3) visible: (stack.currentIndex === 3)

71
ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml
View File

@ -31,6 +31,7 @@ Item {
id: root id: root
property var overview: WalletStores.RootStore.overview property var overview: WalletStores.RootStore.overview
property RootStore rootStore
property ProfileStores.ContactsStore contactsStore property ProfileStores.ContactsStore contactsStore
property CommunitiesStore communitiesStore property CommunitiesStore communitiesStore
property NetworkConnectionStore networkConnectionStore property NetworkConnectionStore networkConnectionStore
@ -66,18 +67,18 @@ Item {
onDetailsChanged: { onDetailsChanged: {
if (!!d.details && !!d.details.input && d.details.input !== "0x") { if (!!d.details && !!d.details.input && d.details.input !== "0x") {
d.loadingInputDate = true d.loadingInputDate = true
RootStore.fetchDecodedTxData(d.details.txHashOut, d.details.input) root.rootStore.fetchDecodedTxData(d.details.txHashOut, d.details.input)
} }
} }
readonly property bool isIncoming: transactionType === Constants.TransactionType.Received || transactionType === Constants.TransactionType.ContractDeployment readonly property bool isIncoming: transactionType === Constants.TransactionType.Received || transactionType === Constants.TransactionType.ContractDeployment
readonly property string networkShortName: d.isTransactionValid ? ModelUtils.getByKey(RootStore.flatNetworks, "chainId", transaction.chainId, "shortName") : "" readonly property string networkShortName: d.isTransactionValid ? ModelUtils.getByKey(root.rootStore.flatNetworks, "chainId", transaction.chainId, "shortName") : ""
readonly property string networkIcon: isTransactionValid ? ModelUtils.getByKey(RootStore.flatNetworks, "chainId", transaction.chainId, "iconUrl") : "network/Network=Custom" readonly property string networkIcon: isTransactionValid ? ModelUtils.getByKey(root.rootStore.flatNetworks, "chainId", transaction.chainId, "iconUrl") : "network/Network=Custom"
readonly property int blockNumber: isDetailsValid ? details.blockNumber : 0 readonly property int blockNumber: isDetailsValid ? details.blockNumber : 0
readonly property int blockNumberIn: isDetailsValid ? details.blockNumberIn : 0 readonly property int blockNumberIn: isDetailsValid ? details.blockNumberIn : 0
readonly property int blockNumberOut: isDetailsValid ? details.blockNumberOut : 0 readonly property int blockNumberOut: isDetailsValid ? details.blockNumberOut : 0
readonly property string networkShortNameOut: networkShortName readonly property string networkShortNameOut: networkShortName
readonly property string networkShortNameIn: transactionHeader.isMultiTransaction ? ModelUtils.getByKey(RootStore.flatNetworks, "chainId", transaction.chainIdIn, "shortName") : "" readonly property string networkShortNameIn: transactionHeader.isMultiTransaction ? ModelUtils.getByKey(root.rootStore.flatNetworks, "chainId", transaction.chainIdIn, "shortName") : ""
readonly property string symbol: isTransactionValid ? transaction.symbol : "" readonly property string symbol: isTransactionValid ? transaction.symbol : ""
readonly property string inSymbol: isTransactionValid ? transaction.inSymbol : "" readonly property string inSymbol: isTransactionValid ? transaction.inSymbol : ""
readonly property string outSymbol: isTransactionValid ? transaction.outSymbol : "" readonly property string outSymbol: isTransactionValid ? transaction.outSymbol : ""
@ -85,27 +86,27 @@ Item {
readonly property string fiatValueFormatted: { readonly property string fiatValueFormatted: {
if (!d.isTransactionValid || transactionHeader.isMultiTransaction || !symbol) if (!d.isTransactionValid || transactionHeader.isMultiTransaction || !symbol)
return "" return ""
return RootStore.formatCurrencyAmount(transactionHeader.fiatValue, RootStore.currentCurrency) return root.rootStore.formatCurrencyAmount(transactionHeader.fiatValue, root.rootStore.currentCurrency)
} }
readonly property string cryptoValueFormatted: { readonly property string cryptoValueFormatted: {
if (!d.isTransactionValid || transactionHeader.isMultiTransaction) if (!d.isTransactionValid || transactionHeader.isMultiTransaction)
return "" return ""
const formatted = RootStore.formatCurrencyAmount(transaction.amount, transaction.symbol) const formatted = root.rootStore.formatCurrencyAmount(transaction.amount, transaction.symbol)
return symbol || (!d.isDetailsValid || !d.details.contract) ? formatted : "%1 (%2)".arg(formatted).arg(Utils.compactAddress(transaction.tokenAddress, 4)) return symbol || (!d.isDetailsValid || !d.details.contract) ? formatted : "%1 (%2)".arg(formatted).arg(Utils.compactAddress(transaction.tokenAddress, 4))
} }
readonly property string outFiatValueFormatted: { readonly property string outFiatValueFormatted: {
if (!d.isTransactionValid || !transactionHeader.isMultiTransaction || !outSymbol) if (!d.isTransactionValid || !transactionHeader.isMultiTransaction || !outSymbol)
return "" return ""
return RootStore.formatCurrencyAmount(transactionHeader.outFiatValue, RootStore.currentCurrency) return root.rootStore.formatCurrencyAmount(transactionHeader.outFiatValue, root.rootStore.currentCurrency)
} }
readonly property string outCryptoValueFormatted: { readonly property string outCryptoValueFormatted: {
if (!d.isTransactionValid || !transactionHeader.isMultiTransaction) if (!d.isTransactionValid || !transactionHeader.isMultiTransaction)
return "" return ""
const formatted = RootStore.formatCurrencyAmount(transaction.outAmount, transaction.outSymbol) const formatted = root.rootStore.formatCurrencyAmount(transaction.outAmount, transaction.outSymbol)
return outSymbol || !transaction.tokenOutAddress ? formatted : "%1 (%2)".arg(formatted).arg(Utils.compactAddress(transaction.tokenOutAddress, 4)) return outSymbol || !transaction.tokenOutAddress ? formatted : "%1 (%2)".arg(formatted).arg(Utils.compactAddress(transaction.tokenOutAddress, 4))
} }
readonly property real feeEthValue: d.details ? RootStore.getFeeEthValue(d.details.totalFees) : 0 readonly property real feeEthValue: d.details ? root.rootStore.getFeeEthValue(d.details.totalFees) : 0
readonly property real feeFiatValue: RootStore.getFiatValue(d.feeEthValue, Constants.ethToken) readonly property real feeFiatValue: root.rootStore.getFiatValue(d.feeEthValue, Constants.ethToken)
readonly property int transactionType: d.isTransactionValid ? WalletStores.RootStore.transactionType(transaction) : Constants.TransactionType.Send readonly property int transactionType: d.isTransactionValid ? WalletStores.RootStore.transactionType(transaction) : Constants.TransactionType.Send
readonly property bool isBridge: d.transactionType === Constants.TransactionType.Bridge readonly property bool isBridge: d.transactionType === Constants.TransactionType.Bridge
@ -126,7 +127,7 @@ Item {
} }
Connections { Connections {
target: RootStore.walletSectionInst target: root.rootStore.walletSectionInst
function onTxDecoded(txHash: string, dataDecoded: string) { function onTxDecoded(txHash: string, dataDecoded: string) {
if (!d.isTransactionValid || (d.isDetailsValid && txHash !== d.details.txHashOut)) if (!d.isTransactionValid || (d.isDetailsValid && txHash !== d.details.txHashOut))
return return
@ -176,7 +177,7 @@ Item {
showAllAccounts: root.showAllAccounts showAllAccounts: root.showAllAccounts
modelData: transaction modelData: transaction
timeStampText: d.isTransactionValid ? qsTr("Signed at %1").arg(LocaleUtils.formatDateTime(transaction.timestamp * 1000, Locale.LongFormat)): "" timeStampText: d.isTransactionValid ? qsTr("Signed at %1").arg(LocaleUtils.formatDateTime(transaction.timestamp * 1000, Locale.LongFormat)): ""
rootStore: RootStore rootStore: root.rootStore
walletRootStore: WalletStores.RootStore walletRootStore: WalletStores.RootStore
community: isModelDataValid && communityId && communitiesStore ? communitiesStore.getCommunityDetailsAsJson(communityId) : null community: isModelDataValid && communityId && communitiesStore ? communitiesStore.getCommunityDetailsAsJson(communityId) : null
@ -193,9 +194,9 @@ Item {
readonly property int latestBlockNumberIn: d.isTransactionValid && !pending && !error && transactionHeader.isMultiTransaction && d.isBridge ? WalletStores.RootStore.getEstimatedLatestBlockNumber(d.transaction.chainIdIn) : 0 readonly property int latestBlockNumberIn: d.isTransactionValid && !pending && !error && transactionHeader.isMultiTransaction && d.isBridge ? WalletStores.RootStore.getEstimatedLatestBlockNumber(d.transaction.chainIdIn) : 0
error: transactionHeader.transactionStatus === Constants.TransactionStatus.Failed error: transactionHeader.transactionStatus === Constants.TransactionStatus.Failed
pending: transactionHeader.transactionStatus === Constants.TransactionStatus.Pending pending: transactionHeader.transactionStatus === Constants.TransactionStatus.Pending
outNetworkLayer: d.isTransactionValid ? Number(ModelUtils.getByKey(RootStore.flatNetworks, "chainId", transactionHeader.isMultiTransaction ? d.transaction.chainIdOut : d.transaction.chainId, "layer")) : 0 outNetworkLayer: d.isTransactionValid ? Number(ModelUtils.getByKey(root.rootStore.flatNetworks, "chainId", transactionHeader.isMultiTransaction ? d.transaction.chainIdOut : d.transaction.chainId, "layer")) : 0
inNetworkLayer: d.isTransactionValid && transactionHeader.isMultiTransaction && d.isBridge ? inNetworkLayer: d.isTransactionValid && transactionHeader.isMultiTransaction && d.isBridge ?
ModelUtils.getByKey(RootStore.flatNetworks, "chainId", d.transaction.chainIdIn, "layer") : 0 ModelUtils.getByKey(root.rootStore.flatNetworks, "chainId", d.transaction.chainIdIn, "layer") : 0
outNetworkTimestamp: d.isTransactionValid ? d.transaction.timestamp : 0 outNetworkTimestamp: d.isTransactionValid ? d.transaction.timestamp : 0
inNetworkTimestamp: d.isTransactionValid ? d.transaction.timestamp : 0 inNetworkTimestamp: d.isTransactionValid ? d.transaction.timestamp : 0
outChainName: transactionHeader.isMultiTransaction ? transactionHeader.networkNameOut : transactionHeader.networkName outChainName: transactionHeader.isMultiTransaction ? transactionHeader.networkNameOut : transactionHeader.networkName
@ -266,7 +267,7 @@ Item {
case Constants.TransactionType.Swap: case Constants.TransactionType.Swap:
return Constants.tokenIcon(d.outSymbol) return Constants.tokenIcon(d.outSymbol)
case Constants.TransactionType.Bridge: case Constants.TransactionType.Bridge:
return Style.svg(ModelUtils.getByKey(RootStore.flatNetworks, "chainId", d.transaction.chainIdOut, "iconUrl")) ?? Style.svg("network/Network=Custom") return Style.svg(ModelUtils.getByKey(root.rootStore.flatNetworks, "chainId", d.transaction.chainIdOut, "iconUrl")) ?? Style.svg("network/Network=Custom")
default: default:
return "" return ""
} }
@ -293,7 +294,7 @@ Item {
case Constants.TransactionType.Swap: case Constants.TransactionType.Swap:
return Constants.tokenIcon(d.inSymbol) return Constants.tokenIcon(d.inSymbol)
case Constants.TransactionType.Bridge: case Constants.TransactionType.Bridge:
return Style.svg(ModelUtils.getByKey(RootStore.flatNetworks, "chainId", d.transaction.chainIdIn, "iconUrl")) ?? Style.svg("network/Network=Custom") return Style.svg(ModelUtils.getByKey(root.rootStore.flatNetworks, "chainId", d.transaction.chainIdIn, "iconUrl")) ?? Style.svg("network/Network=Custom")
default: default:
return "" return ""
} }
@ -648,20 +649,20 @@ Item {
return "" return ""
const type = d.transactionType const type = d.transactionType
if (type === Constants.TransactionType.Swap) { if (type === Constants.TransactionType.Swap) {
return RootStore.formatCurrencyAmount(transactionHeader.inCryptoValue, d.inSymbol) return root.rootStore.formatCurrencyAmount(transactionHeader.inCryptoValue, d.inSymbol)
} else if (type === Constants.TransactionType.Bridge) { } else if (type === Constants.TransactionType.Bridge) {
// Reduce crypto value by fee value // Reduce crypto value by fee value
const valueInCrypto = RootStore.getCryptoValue(transactionHeader.outFiatValue - d.feeFiatValue, d.inSymbol) const valueInCrypto = root.rootStore.getCryptoValue(transactionHeader.outFiatValue - d.feeFiatValue, d.inSymbol)
return RootStore.formatCurrencyAmount(valueInCrypto, d.inSymbol) return root.rootStore.formatCurrencyAmount(valueInCrypto, d.inSymbol)
} }
return "" return ""
} }
tertiaryTitle: { tertiaryTitle: {
const type = d.transactionType const type = d.transactionType
if (type === Constants.TransactionType.Swap) { if (type === Constants.TransactionType.Swap) {
return RootStore.formatCurrencyAmount(transactionHeader.inFiatValue, RootStore.currentCurrency) return root.rootStore.formatCurrencyAmount(transactionHeader.inFiatValue, root.rootStore.currentCurrency)
} else if (type === Constants.TransactionType.Bridge) { } else if (type === Constants.TransactionType.Bridge) {
return RootStore.formatCurrencyAmount(transactionHeader.outFiatValue - d.feeFiatValue, RootStore.currentCurrency) return root.rootStore.formatCurrencyAmount(transactionHeader.outFiatValue - d.feeFiatValue, root.rootStore.currentCurrency)
} }
return "" return ""
} }
@ -675,8 +676,8 @@ Item {
if (!d.isTransactionValid || transactionHeader.isNFT || !d.isDetailsValid) if (!d.isTransactionValid || transactionHeader.isNFT || !d.isDetailsValid)
return "" return ""
if (!d.symbol) { if (!d.symbol) {
const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees) const maxFeeEth = root.rootStore.getFeeEthValue(d.details.maxTotalFees)
return RootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken) return root.rootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken)
} }
switch(d.transactionType) { switch(d.transactionType) {
@ -693,12 +694,12 @@ Item {
return "" return ""
let fiatValue let fiatValue
if (!d.symbol) { if (!d.symbol) {
const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees) const maxFeeEth = root.rootStore.getFeeEthValue(d.details.maxTotalFees)
fiatValue = RootStore.getFiatValue(maxFeeEth, Constants.ethToken) fiatValue = root.rootStore.getFiatValue(maxFeeEth, Constants.ethToken)
} else { } else {
fiatValue = d.feeFiatValue fiatValue = d.feeFiatValue
} }
return RootStore.formatCurrencyAmount(fiatValue, RootStore.currentCurrency) return root.rootStore.formatCurrencyAmount(fiatValue, root.rootStore.currentCurrency)
} }
visible: !!subTitle visible: !!subTitle
} }
@ -722,30 +723,30 @@ Item {
if (fieldIsHidden) if (fieldIsHidden)
return "" return ""
if (showMaxFee) { if (showMaxFee) {
const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees) const maxFeeEth = root.rootStore.getFeeEthValue(d.details.maxTotalFees)
return RootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken) return root.rootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken)
} else if (showFee) { } else if (showFee) {
return RootStore.formatCurrencyAmount(d.feeEthValue, Constants.ethToken) return root.rootStore.formatCurrencyAmount(d.feeEthValue, Constants.ethToken)
} else if (showValue) { } else if (showValue) {
return d.cryptoValueFormatted return d.cryptoValueFormatted
} }
const cryptoValue = transactionHeader.isMultiTransaction ? d.outCryptoValueFormatted : d.cryptoValueFormatted const cryptoValue = transactionHeader.isMultiTransaction ? d.outCryptoValueFormatted : d.cryptoValueFormatted
return "%1 + %2".arg(cryptoValue).arg(RootStore.formatCurrencyAmount(d.feeEthValue, Constants.ethToken)) return "%1 + %2".arg(cryptoValue).arg(root.rootStore.formatCurrencyAmount(d.feeEthValue, Constants.ethToken))
} }
tertiaryTitle: { tertiaryTitle: {
if (fieldIsHidden) if (fieldIsHidden)
return "" return ""
if (showMaxFee) { if (showMaxFee) {
const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees) const maxFeeEth = root.rootStore.getFeeEthValue(d.details.maxTotalFees)
const maxFeeFiat = RootStore.getFiatValue(d.feeEthValue, Constants.ethToken) const maxFeeFiat = root.rootStore.getFiatValue(d.feeEthValue, Constants.ethToken)
return RootStore.formatCurrencyAmount(maxFeeFiat, RootStore.currentCurrency) return root.rootStore.formatCurrencyAmount(maxFeeFiat, root.rootStore.currentCurrency)
} else if (showFee) { } else if (showFee) {
return RootStore.formatCurrencyAmount(d.feeFiatValue, RootStore.currentCurrency) return root.rootStore.formatCurrencyAmount(d.feeFiatValue, root.rootStore.currentCurrency)
} else if (showValue) { } else if (showValue) {
return d.fiatValueFormatted return d.fiatValueFormatted
} }
const fiatValue = transactionHeader.isMultiTransaction ? transactionHeader.outFiatValue : transactionHeader.fiatValue const fiatValue = transactionHeader.isMultiTransaction ? transactionHeader.outFiatValue : transactionHeader.fiatValue
return RootStore.formatCurrencyAmount(fiatValue + d.feeFiatValue, RootStore.currentCurrency) return root.rootStore.formatCurrencyAmount(fiatValue + d.feeFiatValue, root.rootStore.currentCurrency)
} }
visible: !!subTitle visible: !!subTitle
highlighted: true highlighted: true