feat(@desktop/wallet): Loading animation for input data decoding (#11378)
closes #11333
This commit is contained in:
Cuteivist
GitHub
parent
11389facc0
commit
9b293f9c34
6
Makefile
6
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -89,6 +89,7 @@ StatusListItem {
|
|||
statusListItemTagsRowLayout.spacing: 8
|
||||
subTitleBadgeComponent: !!asset.name ? iconComponent : null
|
||||
statusListItemIcon.asset: StatusAssetSettings {}
|
||||
statusListItemIcon.name: ""
|
||||
|
||||
Component {
|
||||
id: iconComponent
|
||||
|
|
|
|||
Loading…
Reference in New Issue