feat(@desktop/wallet): Added NFT preview (#10846)

closes #10822

ui/app/AppLayouts/Wallet/panels/WalletNftPreview.qml

@@ -0,0 +1,109 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import shared.controls 1.0
+import utils 1.0
+
+ColumnLayout {
+    id: root
+
+    property string nftName
+    property string nftUrl
+    property string tokenId
+    property string contractAddress
+    property bool strikethrough: false
+
+    spacing: Style.current.padding
+
+    StatusBaseText {
+        Layout.fillWidth: true
+        font.pixelSize: 15
+        color: Theme.palette.directColor5
+        text: qsTr("Preview")
+        elide: Text.ElideRight
+    }
+
+    Rectangle {
+        radius: 8
+        Layout.fillWidth: true
+        Layout.preferredHeight: nftPreviewColumn.height + Style.current.bigPadding
+        color: nftPreviewSensor.hovered ? Theme.palette.baseColor2 : "transparent"
+        border.width: 1
+        border.color: Style.current.separator
+
+        HoverHandler {
+            id: nftPreviewSensor
+            target: parent
+        }
+
+        Column {
+            // NOTE Using Column instead of Layout to handle image fill mode properly
+            id: nftPreviewColumn
+            spacing: Style.current.padding
+            anchors {
+                left: parent.left
+                top: parent.top
+                right: parent.right
+                margins: Style.current.bigPadding / 2
+            }
+            height: childrenRect.height
+
+            StatusRoundedMedia {
+                id: nftPreviewImage
+                width: parent.width
+                height: width
+                mediaUrl: root.nftUrl
+                mediaType: "image"
+                radius: 8
+            }
+
+            RowLayout {
+                width: parent.width
+                spacing: Style.current.smallPadding
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    Layout.rightMargin: button.visible ? 0 : button.width + parent.spacing
+                    Layout.topMargin: Style.current.smallPadding
+                    Layout.alignment: Qt.AlignLeft
+                    spacing: 4
+                    StatusBaseText {
+                        Layout.fillWidth: true
+                        font.pixelSize: 15
+                        font.strikeout: root.strikethrough
+                        text: root.nftName
+                        visible: !!text
+                        elide: Text.ElideRight
+                    }
+
+                    StatusBaseText {
+                        Layout.fillWidth: true
+                        font.pixelSize: 15
+                        color: Theme.palette.directColor5
+                        text: root.tokenId
+                        visible: !!text
+                        elide: Text.ElideRight
+                    }
+                }
+
+                StatusRoundButton {
+                    id: button
+                    implicitWidth: 32
+                    implicitHeight: 32
+                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                    icon.color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
+                    icon.name: "external"
+                    type: StatusRoundButton.Type.Quinary
+                    radius: 8
+                    visible: nftPreviewSensor.hovered && !!root.tokenId && !!root.contractAddress
+                    onClicked: Global.openLink("https://etherscan.io/nft/%1/%2".arg(root.contractAddress).arg(root.tokenId))
+                }
+            }
+        }
+    }
+}

ui/app/AppLayouts/Wallet/panels/qmldir

@@ -1,2 +1,3 @@
 WalletHeader 1.0 WalletHeader.qml
 WalletTxProgressBlock 1.0 WalletTxProgressBlock.qml
+WalletNftPreview 1.0 WalletNftPreview.qml

ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml

@@ -120,6 +120,16 @@ Item {
                 width: progressBlock.width
             }
 
+            WalletNftPreview {
+                visible: root.isTransactionValid && d.isNFT && !!transaction.nftImageUrl
+                width: Math.min(304, progressBlock.width)
+                nftName: root.isTransactionValid ? transaction.nftName : ""
+                nftUrl: root.isTransactionValid && !!transaction.nftImageUrl ? transaction.nftImageUrl : ""
+                strikethrough: transactionHeader.transactionType === TransactionDelegate.Destroy
+                tokenId: root.isTransactionValid ? transaction.tokenID : ""
+                contractAddress: root.isTransactionValid ? transaction.contract : ""
+            }
+
             Column {
                 width: progressBlock.width
                 spacing: 0