From 9b293f9c3426b98eaece5029cbf310fff3e803ea Mon Sep 17 00:00:00 2001 From: Cuteivist Date: Mon, 10 Jul 2023 15:36:29 +0200 Subject: [PATCH] feat(@desktop/wallet): Loading animation for input data decoding (#11378) closes #11333 --- Makefile | 6 +- .../src/StatusQ/Components/StatusListItem.qml | 4 +- .../Wallet/views/TransactionDetailView.qml | 62 +++++++++++++++---- .../shared/controls/TransactionDataTile.qml | 1 + 4 files changed, 59 insertions(+), 14 deletions(-) diff --git a/Makefile b/Makefile index 0b8aeb2a6e..2d79baa327 100644 --- a/Makefile +++ b/Makefile @@ -146,9 +146,11 @@ QML_DEBUG ?= false QML_DEBUG_PORT ?= 49152 ifneq ($(QML_DEBUG), false) + STATUSQ_BUILD_TYPE=Debug DOTHERSIDE_CMAKE_PARAMS := -DCMAKE_BUILD_TYPE=Debug -DQML_DEBUG_PORT=$(QML_DEBUG_PORT) DOTHERSIDE_BUILD_CMD := cmake --build . --config Debug else + STATUSQ_BUILD_TYPE=Release DOTHERSIDE_CMAKE_PARAMS := -DCMAKE_BUILD_TYPE=Release DOTHERSIDE_BUILD_CMD := cmake --build . --config Release endif @@ -259,7 +261,7 @@ STATUSQ_CMAKE_CACHE := $(STATUSQ_BUILD_PATH)/CMakeCache.txt $(STATUSQ_CMAKE_CACHE): | deps echo -e "\033[92mConfiguring:\033[39m StatusQ" cmake -DCMAKE_INSTALL_PREFIX=$(STATUSQ_INSTALL_PATH) \ - -DCMAKE_BUILD_TYPE=Release \ + -DCMAKE_BUILD_TYPE=$(STATUSQ_BUILD_TYPE) \ -DSTATUSQ_BUILD_SANDBOX=OFF \ -DSTATUSQ_BUILD_SANITY_CHECKER=OFF \ -DSTATUSQ_BUILD_TESTS=OFF \ @@ -275,7 +277,7 @@ statusq-build: | statusq-configure echo -e "\033[92mBuilding:\033[39m StatusQ" cmake --build $(STATUSQ_BUILD_PATH) \ --target StatusQ \ - --config Release \ + --config $(STATUSQ_BUILD_TYPE) \ $(HANDLE_OUTPUT) statusq-install: | statusq-build diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index 8a883f0497..aa44187174 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -86,6 +86,8 @@ Rectangle { property alias errorIcon: errorIcon property alias statusListItemTagsRowLayout: statusListItemSubtitleTagsRow + property int subTitleBadgeLoaderAlignment: Qt.AlignVCenter + signal clicked(string itemId, var mouse) signal titleClicked(string titleId) signal iconClicked(var mouse) @@ -279,7 +281,7 @@ Rectangle { Loader { id: subTitleBadgeLoader - Layout.alignment: Qt.AlignVCenter + Layout.alignment: root.subTitleBadgeLoaderAlignment visible: sourceComponent } diff --git a/ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml b/ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml index f7987b8af7..d376ed8fbe 100644 --- a/ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml +++ b/ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml @@ -34,6 +34,7 @@ Item { d.decodedInputData = "" if (!transaction || !transaction.input || !RootStore.history) return + d.loadingInputDate = true RootStore.history.fetchDecodedTxData(transaction.txHash, transaction.input) } @@ -60,6 +61,7 @@ Item { readonly property string toNetworkName: "" // TODO fill network name for bridge property string decodedInputData: "" + property bool loadingInputDate: false function getNameForSavedWalletAddress(address) { return RootStore.getNameForSavedWalletAddress(address) @@ -73,8 +75,13 @@ Item { Connections { target: RootStore.history function onTxDecoded(txHash: string, dataDecoded: string) { - if (!root.isTransactionValid || txHash !== root.transaction.txHash || !dataDecoded) + if (!root.isTransactionValid || txHash !== root.transaction.txHash) return + if (!dataDecoded) { + d.loadingInputDate = false + return + } + try { const decodedObject = JSON.parse(dataDecoded) let text = qsTr("Function: %1").arg(decodedObject.signature) @@ -86,6 +93,7 @@ Item { } catch(e) { console.error("Failed to parse decoded tx data. Data:", dataDecoded) } + d.loadingInputDate = false } } @@ -339,7 +347,7 @@ Item { width: progressBlock.width RowLayout { width: parent.width - height: Math.max(implicitHeight, 85) + height: networkNameTile.statusListItemSubTitle.lineCount > 1 ? 85 : 70 spacing: 0 TransactionDataTile { id: multichainNetworksTile @@ -370,11 +378,13 @@ Item { } } TransactionDataTile { + id: networkNameTile Layout.fillHeight: true Layout.fillWidth: true title: qsTr("Network") subTitle: transactionHeader.networkName - asset.name: !!d.networkIcon ? Style.svg("%1".arg(d.networkIcon)) : "" + asset.name: !!d.networkIcon ? Style.svg(d.networkIcon) : "" + subTitleBadgeLoaderAlignment: Qt.AlignTop smallIcon: true visible: d.transactionType !== Constants.TransactionType.Bridge } @@ -394,23 +404,24 @@ Item { } } TransactionDataTile { - id: inputDataTile width: parent.width - height: Math.min(implicitHeight + bottomPadding, 112) + height: d.loadingInputDate ? 112 : Math.min(implicitHeight + bottomPadding, 112) title: qsTr("Input data") + // Input string can be really long. Getting substring just for 3+ lines to speedup formatting. subTitle: { - if (!!d.decodedInputData) { - return d.decodedInputData + if (d.loadingInputDate) { + return "" + } else if (!!d.decodedInputData) { + return d.decodedInputData.substring(0, 100) } else if (root.isTransactionValid) { - return root.transaction.input + return String(root.transaction.input).substring(0, 100) } return "" } - visible: !!subTitle - buttonIconName: "more" + visible: !!subTitle || d.loadingInputDate + buttonIconName: d.loadingInputDate ? "" : "more" statusListItemSubTitle.maximumLineCount: 4 statusListItemSubTitle.lineHeight: 1.21 - onButtonClicked: addressMenu.openInputDataMenu(this, subTitle) statusListItemSubTitle.layer.enabled: statusListItemSubTitle.lineCount > 3 statusListItemSubTitle.layer.effect: OpacityMask { maskSource: Rectangle { @@ -423,6 +434,35 @@ Item { } } } + tertiaryTitle: !d.loadingInputDate && !d.decodedInputData ? qsTr("Data could not be decoded") : "" + statusListItemTertiaryTitle.anchors.baseline: statusListItemTitle.baseline + statusListItemTertiaryTitle.font: statusListItemTitle.font + onButtonClicked: addressMenu.openInputDataMenu(this, !!d.decodedInputData ? d.decodedInputData : root.transaction.input) + + Loader { + anchors { + left: parent.left + bottom: parent.bottom + right: parent.right + margins: 12 + } + active: d.loadingInputDate + sourceComponent: Column { + spacing: 10 + Repeater { + model: 3 + LoadingComponent { + anchors { + left: parent.left + right: index === 2 ? parent.horizontalCenter : parent.right + } + height: 11 + radius: 4 + enabled: false + } + } + } + } } TransactionDataTile { width: parent.width diff --git a/ui/imports/shared/controls/TransactionDataTile.qml b/ui/imports/shared/controls/TransactionDataTile.qml index 89fcfc42a1..9363d692f4 100644 --- a/ui/imports/shared/controls/TransactionDataTile.qml +++ b/ui/imports/shared/controls/TransactionDataTile.qml @@ -89,6 +89,7 @@ StatusListItem { statusListItemTagsRowLayout.spacing: 8 subTitleBadgeComponent: !!asset.name ? iconComponent : null statusListItemIcon.asset: StatusAssetSettings {} + statusListItemIcon.name: "" Component { id: iconComponent