From 0686552bc3de0f56aa37f6e7cccf5680243d49eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Tue, 24 Sep 2024 12:16:40 +0200 Subject: [PATCH] TransactionDetailView: refactored to take root store as a dependency --- storybook/pages/TransactionDetailViewPage.qml | 29 ++++---- .../AppLayouts/Wallet/views/RightTabView.qml | 1 + .../Wallet/views/TransactionDetailView.qml | 71 ++++++++++--------- 3 files changed, 52 insertions(+), 49 deletions(-) diff --git a/storybook/pages/TransactionDetailViewPage.qml b/storybook/pages/TransactionDetailViewPage.qml index df07be19fb..2e6d5ff35c 100644 --- a/storybook/pages/TransactionDetailViewPage.qml +++ b/storybook/pages/TransactionDetailViewPage.qml @@ -20,23 +20,23 @@ SplitView { property bool globalUtilsReady: false property bool mainModuleReady: false - property bool rootStoreReady: false property bool isIncoming: false - Component.onCompleted: { - RootStore.getFiatValue = (cryptoValue, symbol) => { return (cryptoValue * 1800).toPrecision(2) } - 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 + RootStore { + id: rootStoreMock - 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 @@ -225,8 +225,9 @@ SplitView { width: 800 height: 500 - active: root.globalUtilsReady && root.mainModuleReady && root.rootStoreReady + active: root.globalUtilsReady && root.mainModuleReady sourceComponent: TransactionDetailView { + rootStore: rootStoreMock contactsStore: contactsStoreMockup controller: controllerMockup overview: overviewMockup diff --git a/ui/app/AppLayouts/Wallet/views/RightTabView.qml b/ui/app/AppLayouts/Wallet/views/RightTabView.qml index 86ee9f22a2..c3bd346ffc 100644 --- a/ui/app/AppLayouts/Wallet/views/RightTabView.qml +++ b/ui/app/AppLayouts/Wallet/views/RightTabView.qml @@ -501,6 +501,7 @@ RightTabBaseView { showAllAccounts: RootStore.showAllAccounts communitiesStore: root.communitiesStore sendModal: root.sendModal + rootStore: SharedStores.RootStore contactsStore: root.contactsStore networkConnectionStore: root.networkConnectionStore visible: (stack.currentIndex === 3) diff --git a/ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml b/ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml index c698afb521..350025c844 100644 --- a/ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml +++ b/ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml @@ -31,6 +31,7 @@ Item { id: root property var overview: WalletStores.RootStore.overview + property RootStore rootStore property ProfileStores.ContactsStore contactsStore property CommunitiesStore communitiesStore property NetworkConnectionStore networkConnectionStore @@ -66,18 +67,18 @@ Item { onDetailsChanged: { if (!!d.details && !!d.details.input && d.details.input !== "0x") { 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 string networkShortName: d.isTransactionValid ? ModelUtils.getByKey(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 networkShortName: d.isTransactionValid ? ModelUtils.getByKey(root.rootStore.flatNetworks, "chainId", transaction.chainId, "shortName") : "" + 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 blockNumberIn: isDetailsValid ? details.blockNumberIn : 0 readonly property int blockNumberOut: isDetailsValid ? details.blockNumberOut : 0 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 inSymbol: isTransactionValid ? transaction.inSymbol : "" readonly property string outSymbol: isTransactionValid ? transaction.outSymbol : "" @@ -85,27 +86,27 @@ Item { readonly property string fiatValueFormatted: { if (!d.isTransactionValid || transactionHeader.isMultiTransaction || !symbol) return "" - return RootStore.formatCurrencyAmount(transactionHeader.fiatValue, RootStore.currentCurrency) + return root.rootStore.formatCurrencyAmount(transactionHeader.fiatValue, root.rootStore.currentCurrency) } readonly property string cryptoValueFormatted: { if (!d.isTransactionValid || transactionHeader.isMultiTransaction) 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)) } readonly property string outFiatValueFormatted: { if (!d.isTransactionValid || !transactionHeader.isMultiTransaction || !outSymbol) return "" - return RootStore.formatCurrencyAmount(transactionHeader.outFiatValue, RootStore.currentCurrency) + return root.rootStore.formatCurrencyAmount(transactionHeader.outFiatValue, root.rootStore.currentCurrency) } readonly property string outCryptoValueFormatted: { if (!d.isTransactionValid || !transactionHeader.isMultiTransaction) 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)) } - readonly property real feeEthValue: d.details ? RootStore.getFeeEthValue(d.details.totalFees) : 0 - readonly property real feeFiatValue: RootStore.getFiatValue(d.feeEthValue, Constants.ethToken) + readonly property real feeEthValue: d.details ? root.rootStore.getFeeEthValue(d.details.totalFees) : 0 + 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 bool isBridge: d.transactionType === Constants.TransactionType.Bridge @@ -126,7 +127,7 @@ Item { } Connections { - target: RootStore.walletSectionInst + target: root.rootStore.walletSectionInst function onTxDecoded(txHash: string, dataDecoded: string) { if (!d.isTransactionValid || (d.isDetailsValid && txHash !== d.details.txHashOut)) return @@ -176,7 +177,7 @@ Item { showAllAccounts: root.showAllAccounts modelData: transaction timeStampText: d.isTransactionValid ? qsTr("Signed at %1").arg(LocaleUtils.formatDateTime(transaction.timestamp * 1000, Locale.LongFormat)): "" - rootStore: RootStore + rootStore: root.rootStore walletRootStore: WalletStores.RootStore 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 error: transactionHeader.transactionStatus === Constants.TransactionStatus.Failed 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 ? - 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 inNetworkTimestamp: d.isTransactionValid ? d.transaction.timestamp : 0 outChainName: transactionHeader.isMultiTransaction ? transactionHeader.networkNameOut : transactionHeader.networkName @@ -266,7 +267,7 @@ Item { case Constants.TransactionType.Swap: return Constants.tokenIcon(d.outSymbol) 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: return "" } @@ -293,7 +294,7 @@ Item { case Constants.TransactionType.Swap: return Constants.tokenIcon(d.inSymbol) 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: return "" } @@ -648,20 +649,20 @@ Item { return "" const type = d.transactionType 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) { // Reduce crypto value by fee value - const valueInCrypto = RootStore.getCryptoValue(transactionHeader.outFiatValue - d.feeFiatValue, d.inSymbol) - return RootStore.formatCurrencyAmount(valueInCrypto, d.inSymbol) + const valueInCrypto = root.rootStore.getCryptoValue(transactionHeader.outFiatValue - d.feeFiatValue, d.inSymbol) + return root.rootStore.formatCurrencyAmount(valueInCrypto, d.inSymbol) } return "" } tertiaryTitle: { const type = d.transactionType 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) { - return RootStore.formatCurrencyAmount(transactionHeader.outFiatValue - d.feeFiatValue, RootStore.currentCurrency) + return root.rootStore.formatCurrencyAmount(transactionHeader.outFiatValue - d.feeFiatValue, root.rootStore.currentCurrency) } return "" } @@ -675,8 +676,8 @@ Item { if (!d.isTransactionValid || transactionHeader.isNFT || !d.isDetailsValid) return "" if (!d.symbol) { - const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees) - return RootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken) + const maxFeeEth = root.rootStore.getFeeEthValue(d.details.maxTotalFees) + return root.rootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken) } switch(d.transactionType) { @@ -693,12 +694,12 @@ Item { return "" let fiatValue if (!d.symbol) { - const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees) - fiatValue = RootStore.getFiatValue(maxFeeEth, Constants.ethToken) + const maxFeeEth = root.rootStore.getFeeEthValue(d.details.maxTotalFees) + fiatValue = root.rootStore.getFiatValue(maxFeeEth, Constants.ethToken) } else { fiatValue = d.feeFiatValue } - return RootStore.formatCurrencyAmount(fiatValue, RootStore.currentCurrency) + return root.rootStore.formatCurrencyAmount(fiatValue, root.rootStore.currentCurrency) } visible: !!subTitle } @@ -722,30 +723,30 @@ Item { if (fieldIsHidden) return "" if (showMaxFee) { - const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees) - return RootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken) + const maxFeeEth = root.rootStore.getFeeEthValue(d.details.maxTotalFees) + return root.rootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken) } else if (showFee) { - return RootStore.formatCurrencyAmount(d.feeEthValue, Constants.ethToken) + return root.rootStore.formatCurrencyAmount(d.feeEthValue, Constants.ethToken) } else if (showValue) { return 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: { if (fieldIsHidden) return "" if (showMaxFee) { - const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees) - const maxFeeFiat = RootStore.getFiatValue(d.feeEthValue, Constants.ethToken) - return RootStore.formatCurrencyAmount(maxFeeFiat, RootStore.currentCurrency) + const maxFeeEth = root.rootStore.getFeeEthValue(d.details.maxTotalFees) + const maxFeeFiat = root.rootStore.getFiatValue(d.feeEthValue, Constants.ethToken) + return root.rootStore.formatCurrencyAmount(maxFeeFiat, root.rootStore.currentCurrency) } else if (showFee) { - return RootStore.formatCurrencyAmount(d.feeFiatValue, RootStore.currentCurrency) + return root.rootStore.formatCurrencyAmount(d.feeFiatValue, root.rootStore.currentCurrency) } else if (showValue) { return d.fiatValueFormatted } 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 highlighted: true